css的垂直居中與水平居中

css的垂直居中與水平居中

1、 塊級盒子水平居中

1. width 必須有寬度
2. 盒子的左右外邊距 auto

width: 100px;
height: 100px;
margin: 0 auto;

2、 行盒/行塊盒/文字水平居中

只須要在父級元素使用 text-align: center; 便可

3、 文字垂直居中

包裹文字的盒子設置行高等於盒子高度，這樣行高的上空隙和下空隙就會把文字內容擠到中間
若是行高小於盒子高度，文字會偏上，行高大於盒子高度，文字會偏下

height: 50px;
line-height: 50px;

4、絕對定位的盒子居中

加了絕對定位的盒子不能經過 margin:0 auto實現水平居中，但能夠經過如下計算方式實現水平和垂直居中

1. 絕對定位的盒子水平居中

• 讓盒子的左側移動到父級元素的水平中心位置
• 讓盒子向左移動自身寬度的一半

width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            /*讓盒子的左側移動到父級元素的水平中心位置*/
            left: 50%;
            /*1. 使用margin-left: -50px;須要本身計算出盒子自身寬度的一半，若是盒子寬度改變了，這裏也要改*/
            /*margin-left: -50px;*/
            /*2. transform: translateX(-50%);過渡，自動計算自身盒子的一半寬度*/
            transform: translateX(-50%);

2. 絕對定位的盒子垂直居中

• 讓盒子的上側移動到父級元素的水平中心位置
• 讓盒子向上移動自身寬度的一半

width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            /*讓盒子的上側移動到父級元素的垂直中心位置*/
            top: 50%;
            /*1. 使用margin-top: -50px;須要本身計算出盒子自身高度的一半，若是盒子高度改變了，這裏也要改*/
            /*margin-top: -50px;*/
            /*2. transform: translateY(-50%);過渡，自動計算自身盒子的一半高度*/
            transform: translateY(-50%);