html 绝对布局 居中,CSS居中的实现方式

1.水平居中

1.1 text-align:center

父盒子设置text-align:center,如果子盒子不是行内元素，可以先设置display:inline或者display:inline-block转成行内元素。

.father{

text-align:center;

}

.chlidren{

display:inline-block;

background: red;

}

抹茶冰淇淋居中方法研究

image.png

1.2 margin:0 auto

需要谁居中，给其设置 margin: 0 auto,盒子的宽度也要进行设置

.father{

}

.chlidren{

margin:0 auto;

width:180px;

background: red;

}

抹茶冰淇淋居中方法研究

image.png

1.3 父盒子相对定位，子盒子绝对定位，对子盒子设置transform:translateX(-50%); left:50%;

.father {

position: relative;

}

.chlidren {

position: absolute;

left: 50%;

transform: translateX(-50%);

background: red;

}

抹茶冰淇淋居中方法研究

image.png

2.垂直居中

2.1 单行元素垂直居中，设置line-height即可

不需要设置height

高度是由行高决定的，而非文字

.son{

line-height: 100px;

background:red;

}

image.png

**2.2 多行元素垂直居中 **

(1)父盒子设置display:table-cell;vertical-align:middle;

image.png

(2)近似垂直居中，父盒子设置line-height,子盒子设置line-height,vertical-align:middle

一般文字的line-height建议设置为20px

.father{

width:300px;

line-height:180px;

border:1px solid dodgerblue;

}

.son{

display:inline-block;

line-height:20px;

vertical-align:middle;

background:red;

}

抹茶冰淇淋垂直方法研究;抹茶冰淇淋垂直方法研究

image.png

3.水平垂直居中

3.1 flex布局

父盒子设置 display:flex; justify-content:center; align-items:center;

.father {

display: flex;

justify-content: center;

align-items: center;

height: 400px;

}

image.png

3.2 父盒子相对定位，子盒子绝对定位，利用transform

.father {

position:relative;

height:400px;

}

.chlidren {

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

background: red;

}

抹茶冰淇淋居中方法研究

image.png

3.3 父盒子相对定位，子盒子绝对定位，利用方位值和margin: auto

.father {

position:relative;

height:400px;

}

.chlidren {

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

background: red;

width:100px;

height:100px;

}

image.png