效果图如下:
div嵌套的div水平垂直居中
body代码:

	<div class="div-one">
        <div class="div-two"></div>
    </div>

css代码:

	.div-one{
            width: 300px;
            height: 300px;
            position: relative;
            border: 1px solid #ff871e;
        }
        .div-two{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: #ff871e;
        }

到这里轻松实现嵌套的水平垂直居中状态。

相关文章: