css的th如何实现全部居中,CSS之居中方法总结 - osc_d3xth7wj的个人空间 - OSCHINA - 中文开源技术交流社区...

今天复习了一下关于居中的几种方式

(1)水平居中：给div设置一个宽度，然后添加margin:0 auto属性

div {

width: 200px;

margin: 0 auto;

}

(2)让绝对定位的div居中

div {

position: absolute;

width: 300px;

height: 300px;

margin: auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

/* 方便看效果 */

background-color: pink;

}

(3)水平垂直居中一

div {

/* 相对定位或绝对定位均可 */

position: relative;

width: 500px;

height: 300px;

top: 50%;

left: 50%;

/* 外边距为自身宽高的一半 */

margin: -150px 0 0 -250px;

/* 方便看效果 */

background-color: pink;

}

(4)水平垂直居中二

div {

/* 相对定位或绝对定位均可 */

position: absolute;

width: 500px;

height: 300px;

top: 50%;

left: 50%;

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

/* 方便看效果 */

background-color: pink;

}

(5)水平垂直居中三：flex盒模型(很强大，建议多了解一下)

.container {

display: flex;

height: 500px;

width: 500px;

border: 1px solid #ccc;

/* 垂直居中 */

align-items: center;

/* 水平居中 */

justify-content: center;

}

.container div {

width: 100px;

height: 100px;

/* 方便看效果 */

background-color: pink;

}