div里面内容水平居中_div居中之div水平居中

(资料图)

1、实现div下只有一个子div的水平居中办法如下：.continer{height:100px;width:100px;background-color:aqua;text-align: center;//内联元素，使用text-align属性，可以修改对齐方式}.child{display: inline;//将子div设置为内联元素}我是子div2、实现div下只有多个子div的水平居中，思路是在多个子div外面再加一个div（假设命名为inner），同时inner设置为水平居中margin：0 auto，然后将多个子div设置在同一行，同时水平居中。

2、代码如下：.continer{height:100px;width:500px;background-color:aqua;text-align: center;}.inner{margin:0 auto;text-align: center;background-color:chartreuse}.child{display: inline-block;vertical-align: top;background-color: coral}我是子div1我是子div2我是子div3扩展资料：使元素水平居中的几种方法：如果是内联元素，比如span，img，a，input等，直接使用text-align:center2、如果是块级元素，比如h1-h6标题元素，div，p，form，section等，方法如下：1）父元素使用margin:0 auto2）将块级元素设置为内联元素，使用display:inline;或者disply:inline-block;3、使用flex布局，代码如下：.box {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */width: 1000px;height: 600px;border: 1px solid red;}.inner {width: 300px;height: 200px;background-color: red;}

标签：