div 里面内容水平垂直居中

css

.main{
    background: #999999;
    width: 600px;
    height: 400px;

    /*采用flex方式*/
    display: flex;
    /*div内容垂直居中*/
    align-items: center;
	   
    /*div内容水平居中*/
    justify-content: center;
    text-align: justify;
}

html

<body >
<div  class="main">
    <!-- 居中的内容需要使用一个div包含 -->
    <div>
    <p>测试测试测试</p>
    <p>测试测试测试</p>
    <p>测试测试测试</p>
    </div>
</div>

效果图如下

posted @ 2019-11-24 18:10  吴川华仔博客  阅读(487)  评论(0)  编辑  收藏  举报