CSS居中方式总结

一、水平居中方法

1.行内元素、字体的水平居中

1.对于行内元素（display值为inline或inline-block都可以）或者字体：父元素添加css规则：text-align：center;

p{

/*关键*/

text-align:center;

}

ul{

/*关键*/

text-align:center:

}

/*这里li设置inline-block*/

.item{

/*关键*/

display:inline-block;

}

I am ry

1

2

3

4

2.块元素的水平居中

1.使用margin实现水平居中

将margin-left 和 margin-right 设置为auto，块元素将会自动匹配适应，实现水平居中

*{

margin:0;

padding:0;

}

.box1{

height:300px;

background:blue;

}

.item1{

/*关键，margin-left，margin-right设置为auto*/

margin: 0 auto;

width: 100px;

height: 100px;

background:red;

}

2.使用position+margin-left实现水平居中

定位后，设置left先整体偏移父容器的一半，再使用负margin-left自己一半的宽度，从而子元素中心对准父元素中心。

.box2{

position:relative;

height:300px;

background:blue;

}

.item2{

/*关键 相对定位*/

position: relative;

/*关键*/

left: 50%;

/*关键*/

margin-left:-50px;

width:100px;

height:100px;

background:red;

}

3.如果是多个块元素在同一水平线居中排列，则将其display设置成inline-block，还有一种是使用flexbox的布局方式来实现。

块元素设置了inline-block后，拥有行内元素并排特点，只要父元素设置text-align即可使其水平居中。

.box3{

/* 关键，对于行内元素水平居中 */

text-align: center;

}

.item3{

/* 关键，将块元素设置成行内块接元素 */

display:inline-block;

width:100px;

height: 100px;

background:red;

}

二、垂直居中

1.行内元素或者文字（单行情况）

1.可以直接使用line-height属性来设置: 将line-height设置成和height一样即可

.text{

height:100px;

line-height:100px;

border:1px solid red;

}

we dont talk anymore

2.使用padding（top,bottom）通过增加内边距来实现垂直的居中

.ctext{

/*关键*/

padding-top:30px;

padding-bottom:30px;

border:1px solid red;

}

确认过眼神，我遇上对的人

2.行内元素或者文字（多行情况）

1.照样可以使用padding（top 和 bottom）

2.对父元素设置display:table-cell 和 vertical-align:middle

.box{

/* 将其变成单元格的形式 */

display: table-cell;

/* width:100px; */

height:300px;

border:1px solid red;

/* 设置内联元素的垂直对齐的方式 */

vertical-align: middle;

}

how to love

I knoe I need somebody

I know I need somebody

pary for me

3.块元素垂直居中

1.确定宽高的情况

使用position 和 margin-top配合

*{

margin:0;

padding:0;

}

/* 父元素 */

.parent{

position:relative;

height:400px;

border: 1px solid blue;

}

/* 子元素 */

.child{

/* position */

position: relative;

/* 距离顶部50% */

top:50%;

/* 再用margin-top 向上调子容器一半高度，则刚好子元素中心对准父元素中心 */

margin-top:-100px;

height:200px;

border:1px solid red;

}

parent

child

2.对于未知宽高的

使用transform 的 translateY(-50%) 向上平移自身一半

.parent2{

position: relative;

background:blue;

height:400px;

}

.child2{

position: relative;

top:50%;

transform: translateY(-50%);

background: red;

}

parent2

child2

3.使用flex布局

.parent3{

/*关键flex*/

display:flex;

display: -webkit-flex;

/* 对齐排列居中 */

justify-content:center;

/* 排列方向垂直 */

flex-direction:column;

height:400px;

background:yellow;

}

.child3{

height:100px;

}

三、水平且垂直居中

1.position 和 margin 配合

*{

margin: 0 ;

padding: 0 ;

}

.box1{

position:relative;

height:400px;

background:blue;

}

.item1{

/*关键*/

position: absolute;

top: 50%;

left: 50%;

margin-top:-50px;

margin-left:-50px;

width:100px;

height:100px;

background: red;

}

2.使用flex布局

同时设置两条居中属性 justify-content 和 align-items

.box2{

display: flex;

/*关键*/

justify-content: center;

/*关键*/

align-items: center;

height:300px;

background:yellow;

}

.item2{

width:50px;

height:50px;

background:red;

}