前端面試題1---css的居中方式

1.css的居中方式

CSS中的居中可分為水平居中和垂直居中。水平居中分為行內元素居中和塊狀元素居中兩種情況，而塊狀元素又分為定寬塊狀元素居中和不定寬塊狀元素居中

一、水平居中
1.行內元素(文字txt，圖片img)

text-align:center;

2.塊級元素居中
01.確定寬度的塊級元素(已知塊狀元素的width且width為固定值)
方法一:margin和width實現水平居中

.content{
	width:200px;
	height:200px;
	margin:0 auto;
}

方法二:絕對定位和margin-left: -(寬度值/2)實現水平居中

.content{
	width:200px;
	height:200px;
	position:absolute;
	left:50%;
	margin-left:-100px;/*width的一半*/
}

02未知寬度的塊級元素(塊狀元素的寬度width不固定)
方法一:利用table標籤的長度自適應性

將要顯示的元素加入到 table 標籤當中，然後為 table 標籤設定“左右margin”值為“auto”來實現居中
table{
  	 	margin:0 auto;
}
<div>
	<table>
    	<tr><td>
    		<ul>
        		<li>Hello world</li>
        		<li>Hello world</li>
   		 	</ul>
    	</td></tr>
	</table>
</div>

或使用 display : table；然後設該元素“左右margin”值為“auto”來實現居中
.wrap{
    background:#ccc;
    display:table;
    margin:0 auto;
}
<div class="wrap">
	 Hello world  
</div>

方式二:改變塊級元素的 display 為 inline 型別（設定為 行內元素 顯示），然後使用 text-align:center 來實現居中效果。
存在問題：需額外處理inline-block的瀏覽器相容性（解決inline-block元素的空白間距

.container{
    text-align:center;
 }
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline; 
 }
<div class="container">
    <ul>
        <li>Hello world</li>
        <li>Hello world</li>
    </ul>
</div>

方法三:絕對定位實現水平居中

.content{
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%); /* 移動元素本身50% */
	  background: aqua;
}

方法四:相對定位實現水平居中
先設定父元素wrap清除浮動，然後左浮動。定位讓wrap向右偏移50%。然後定義子元素相對於父元素向左偏移50%。脫離父元素。

/*目標元素的父元素*/
.contentParent{
  float: left;
  position: relative;
  left: 50%;
  clear:both;
}
/*目標元素*/
.content{
  	position: relative;
  	left:-50%;/*right:50%*/
  	background-color:aqua;
}

二、垂直居中
垂直居中可分為父元素高度確定的單行文字，以及父元素高度確定的多行文字。
01.父元素高度確定的單行文字

/*設定父元素的 height 和 line-height 高度一致來實現的*/
.wrap h2{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;
}
<div class="wrap">
    <h2>Hello world</h2>
</div>

02.父元素高度確定的多行文字
方法1：使用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle。

.wrap{
    height:300px;
    background:#ccc;
    /* td 標籤預設情況下就預設設定了 vertical-align 為 middle，可以不需要顯式地設定 */
    vertical-align:middle;  
}
<table>
    <tbody>
        <tr>
            <td class="wrap">
                <div>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                </div>
            </td>
        </tr>
    </tbody>
</table>

.wrap{
    background:#ccc;
    display:table;
    vertical-align:middle;
}

<div class="wrap">
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
</div>