行內元素&塊級元素的水平垂直居中方法

今天實習面試的時候,問到了這個問題,一時間只是知道塊元素的方法,行內的方法知道但是覺得那是控制文字的顯示方法,猶豫沒有說。面試官接著就問了我行內元素跟塊級元素的區別。下麵是整理。

行內元素&塊級元素

行內元素：與其他元素共占一行，一行排滿前不換行，不能設置寬高，沒有水平方向的margin和padding。常見有img，span，select，input，a
塊級元素：占據整行，能設置寬高，能設置margin和padding的寬高。常見有ul，p（段落）,table(表格),form(表單)

行元素轉換為塊級元素/行內塊

float:left;
position:absolute/fixed;轉換成行內塊定位使行內元素轉換為塊級元素
display:block/inline-block;

水平垂直方法

行內元素

line-height:內容高度;
tex-align:center;

塊級元素

1.定位+margin方法

定位上下左右值為0,然後margin:auto實現

	 .fa{//父元素設置絕對定位
            position: relative;
            width: 500px;
            height: 500px;
            background-color:#eee
            }
         .son{//子元素設置絕對屬性上下左右值為0,margin:auto
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin: auto;
            width:20px;
            height:50px;
            background-color:#999;
            }

2.定位+margin/tansform方法

子元素在絕對定位下移動父盒子一半寬高,再通過margin操作向反方向移動半個子盒子的寬高

 	.fa{
            position: relative;
            width: 500px;
            height: 500px;
            background-color:#eee
            }
            .son{
            position:absolute;
            top:50%;
            left:50%;
            margin-top: -10px;
            margin-left: -25px;
            width:20px;
            height:50px;
            background-color:#999;
            }

通過transform:tanslateX()/translateY()反方向移動半個子盒子的寬高實現

	.fa{
            position: relative;
            width: 500px;
            height: 500px;
            background-color:#eee
            }
        .son{
            position:absolute;
            top:50%;
            left:50%;             
            width:20px;
            height:50px;
            background-color:#999;
            transform: translateX(-10px);
            transform:translateY(-25px);           
            }

3.flex方法
父盒子設置flex:flex;設置主軸居中justify-content:center;側軸居中align-items:center;

   	.fa{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 500px;
            height: 500px;
            background-color:#eee
            }
        .son{            
            width:20px;
            height:50px;
            background-color:#999;
            transform: translateX(-10px);
            transform:translateY(-25px);           
            }