html中垂直水平居中怎么设置,CSS中设置元素垂直水平居中

利用绝对定位(absolute)和外边距(margin)

说明：这种方式适用子级的宽(width)高(height)固定，将父级(box)设置成相对定位(position: relative)，将子级(content)设置成绝对定位(相当于其父级)，top、left给50%，再用margin-top=-(子级高度的一半)，margin-left=-(子级宽度的一半)。

代码：

/* 这里是css样式的内容 */

*{

margin: 0;

padding: 0;

}

.box{

width: 300px;

height: 300px;

border: 1px solid #000;

background-color: lawngreen;

position: relative;

}

.content{

width: 100px;

height: 100px;

background-color: blue;

position: absolute;

left: 50%;

top: 50%;

margin-top: -50px;

margin-left: -50px;

}

显示效果如下：

3868852-054510e13491eec4.png

利用绝对定位(absolute)和外边距(margin:auto)

说明：这种方式可适用子级的宽(width)高(height)不固定，将父级(box)设置成相对定位(position: relative)，将子级(content)设置成绝对定位(相当于其父级)，top、left、right、bottom给0，再用margint=auto。

代码：

*{

margin: 0;

padding: 0;

}

.box{

width: 300px;

height: 300px;

border: 1px solid #000;

background-color: lawngreen;

position: relative;

}

.content{

width: 100px;

height: 100px;

background-color: blue;

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

}

显示效果如下：

3868852-054510e13491eec4.png

利用绝对定位(absolute)和transfrom

说明：此方法利用了定位和CSS3的形变，另外不需要知道居中元素的宽高就可以使用。

代码：

*{

margin: 0;

padding: 0;

}

.box{

width: 300px;

height: 300px;

border: 1px solid #000;

background-color: lawngreen;

position: relative;

}

.content{

padding: 50px; /* 此处的padding只是为展示子级宽高不定，由内容撑开 */

background-color: blue;

position: absolute;

top: 50%;

left: 50%;

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

}

显示效果如下：

3868852-054510e13491eec4.png

利用表格(diplay：table-cell)

说明：此方法把其父级变成表格样式，再利用表格的样式来进行居中。

注意：子级如果为块元素就得加margin:0 auto;也可子级设为行内元素(display:inline-block)。两种方式。

代码：

*{

margin: 0;

padding: 0;

}

.box{

width: 300px;

height: 300px;

border: 1px solid #000;

background-color: lawngreen;

display: table-cell;

vertical-align: middle;

text-align: center;

}

.content{

width: 100px;

height: 100px;

background-color: blue;

/* margin: 0 auto;*/ /* 方式一 */

display: inline-block; /* 方式二 */

}

显示效果如下：

3868852-054510e13491eec4.png

利用弹性盒模型(flexBox)

说明：此方法，利用了CSS3的新特性flex。不需要知道居中元素的宽高就可以使用。但需要注意的是：在移动端使用完美，但pc端有兼容性问题。

代码：

*{

margin: 0;

padding: 0;

}

.box{

width: 300px;

height: 300px;

border: 1px solid #000;

background-color: lawngreen;

display: flex;

justify-content: center;

align-items:center;

}

.content{

padding: 50px; /* 此处的padding只是为展示子级宽高不定，由内容撑开 */

background-color: blue;

}

显示效果如下：

3868852-054510e13491eec4.png

基线对齐方式(vertical-align:middle)

说明：此方法，设置了一个“参照物(reference)”和容器一样高一样，然后在父级设置水平对齐方式( text-align:center)，并在参照物和子级设置基线对齐方式(vertical-align:middle)。不需要知道居中元素的宽高就可以使用注意：需要将参照物和子级都设成行内块元素( display:inline-block)

代码：

*{

margin: 0;

padding: 0;

}

.box{

width: 300px;

height: 300px;

border: 1px solid #000;

background-color: lawngreen;

text-align:center;

}

.content{

padding: 50px; /* 此处的padding只是为展示子级宽高不定，由内容撑开 */

background-color: blue;

display:inline-block;

vertical-align:middle;

}

.reference{

width:0px;

height:100%;

display: inline-block;

vertical-align:middle;

}

显示效果如下：

3868852-054510e13491eec4.png

本人遇到的或者工作过中使用的先总结到这里，以后有新方式还有补充ing....