如何让子div在父div中水平居中？
作者&投稿：羽宜 （若有异议请与网页底部的电邮联系）
水平居中有两种情况：子元素，父级元素都是块级元素的时候，子级元素{margin:0 auto}。需要注意的是当子级元素的position为非默认及relative时，这种设置会失效。如p等标签中内的文字内容水平居中:使用{text-Align:center}。垂直居中设置该元素的行高等于元素的高。如：{height:100px;line-height:100px}可实现。注意：这种方法应用于行内元素
这个要要用到绝对定位和盒子模型
#father { width:200px; height:200px; background-color:yellow; } #son { position:absolute; width:50px; height:50px; background-color:red; margin:75px 0px 0px 75px; } 效果如下：
你发的图中的效果，需要使用CSS来实现，代码如下：
<style type="text/css">
#zhongjian {width: 900px;}
.mokuai {float: left; width: 300px;}
.clear {clear: both;}
</style>
<div id="zhongjian">
<div class="mokuai_1 mokuai">853</div>
<div class="mokuai_2 mokuai">853</div>
<div class="mokuai_3 mokuai">853</div>
<div class="clear"></div>
</div>
这里的关键是float属性的使用，你可以百度一下就能找到float属性的详细说明。
父DIV与子DIV都要设置宽度，我是随便设的，你可以根据需要来分别调整。
图中子DIV之间的间距以及子DIV与父DIV之间的间距需要通过margin属性来控制，如果不明白的话，你可以把具体的数值告诉我，我帮你设置。
你这个居中当然用绝对定位最好，能随着父盒子的变化而变化：
这样就不用计算盒子大小都能自适应居中了
margin:0 auto; 前提是父div的宽度必须比子div的宽度宽！
<html>
<head>
<style>
#box{
border: 1px solid gray;
width: 100%;
}
#zhongjian{
height: 120px;
width: 340px;
background: yellow;
margin-left: auto;
margin-right: auto;
}
.mokuai{
margin: 10px 0 10px 10px;
background: red;
height: 100px;
width: 100px;
float: left;
}
</style>
<body>
<div id="box">
<div id="zhongjian">
<div class="mokuai_1 mokuai">853</div>
<div class="mokuai_2 mokuai">853</div>
<div class="mokuai_3 mokuai">853</div>
</div>
</div>
</body>
</html>
这种最直接，再套个层。
汤炕援生： 水平居中有两种情况:子元素,父级元素都是块级元素的时候,子级元素{margin:0 auto}.需要注意的是当子级元素的position为非默认及relative时,这种设置会失效.如p等标签中内的文字内容水平居中:使用{text-Align:center}.垂直居中设置该元素的行高等于元素的高.如:{height:100px;line-height:100px}可实现.注意:这种方法应用于行内元素
广汉市19669469973： 如何让子DIV水平居中于父DIV? - ？
汤炕援生： 按要求,这样设置即可:<div style=＂margin:0 auto;border:1px solid blue;＂><div style=＂width:150px;background-color:green;display: table;margin:0 auto;text-align:center;＂>111</div></div>
广汉市19669469973： 如何让子DIV水平居中于父DIV?？
汤炕援生： margin:0 auto; 前提是父div的宽度必须比子div的宽度宽!把代码贴上来! 你把三个最外层的div的width:100%;中间的div的width能顶死吗?不能就width:50%;然后在margin:0 auto;
广汉市19669469973： 新手问下css里怎么让子div在父级div水平垂直居中 - ？
汤炕援生： 设置text-align: center; 和 line-height 等于 div的高度1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26<!DOCTYPE html> <htmllang=＂en＂> <head><metacharset=＂UTF-8＂><title>test</title><style>.a {width: 200px; ...
广汉市19669469973： 如何让div容器水平居中显示在父容器中 - ？
汤炕援生： (1)正确的DOCTYPE类型设置,让浏览器以标准模式渲染html,css (2)div设置宽度值,margin-left,margin-right设为auto (3)div不使用浮动,即保持默认的float:none
广汉市19669469973： div css如何实现子DIV水平居中??? - ？
汤炕援生： 1、实现div下只有一个子div的水平居中办法如下:.continer{ height:100px; width:100px; background-color:aqua; text-align: center;//内联元素,使用text-align属性,可以修改对齐方式 }.child{ display: inline;//将子div设置为内联元素 }我是子div2、...
广汉市19669469973： html的问题,怎么让一个DIV在另一个DIV中水平垂直居中? - ？
汤炕援生： html中让一个DIV在另一个DIV中水平垂直居中,可以通过将一个div包裹第二个div,然后在将设置第一个div的宽高,要比第二大上很多,然后在设置第二个的宽高,然后通过margin:auto auto;这里我提交代码: <html> <head> <title>文字测试</...
广汉市19669469973： 在线等,如何用css控制div里面嵌套的一个div在第一个div里面水平居中? - ？
汤炕援生： 两个div都要设置width值,然后里面那个div加个margin:0 auto;样式就行了!!!
广汉市19669469973： 怎样让子div在父div里垂直居中 - ？
汤炕援生： 给父元素设:position:relative,给子元素设:position:absolute;margin:auto;left:0;right:0;top:0;bottom:0 或:给父元素:display:flex;align-items:center;justify-content:center;
广汉市19669469973： div css如何实现子DIV里的多个子DIV水平居中? - ？
汤炕援生： #find_button{ height: 25px; width: 950px; margin: 0 auto;/*需设置宽度才能居中,*/ text-align:center;/*如果无法兼容IE6,可以加上这句*/ }
