html body不定宽居中,css如何设置不定宽水平居中？

css如何设置不定宽水平居中？

方法1：使用position+transform

主要使用了css3中transform进行元素偏移，效果非常好

这方法功能很强大，也比较灵活，不仅仅局限在实现居中显示。 兼容方面也一样拿IE来做比较，第二种方法IE8以上都能使用。 IE8及IE8以下都会出现问题。

body,

html {

margin: 0;

width: 100%;

height: 100%;

}

#box {

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.7);

position: relative;

}

#content {

position: absolute;

background: pink;

left: 50%;

transform: translateX(-50%);

-webkit-transform: translateX(-50%);

}

div被其中的内容撑起宽高

方法2：利用flex进行布局

body,

html {

margin: 0;

width: 100%;

height: 100%;

}

#box {

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.7);

display: flex;

justify-content: center;

align-items: center;

}

#content {

width: 50%;

height: 50%;

background: pink;

}

div被其中的内容撑起宽高

方法3：兼容性最好的方案(不能算严格意义上的不定宽高，子div不能根据内容大小做改变)：

第一种方法出现的比较早。兼容拿IE来做参照——>第一种方法IE7以上都能使用，IE7及IE7以下都会出现问题。

body,

html {

margin: 0;

width: 100%;

height: 100%;

}

#box {

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.7);

position: relative;

}

#content {

width: 50%;

height: 50%;

background: pink;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

原理不是很明白，但是这种方式并不完善，content只能设置固定宽高，无甚意义。

更多前端开发知识，请查阅 HTML中文网 ！！