1、实现div下只有一个子div的水平居中办法如下：
continer{
height:100px;
width:100px;
background-color:aqua;
text-align: center;//内联元素，使用text-align属性，可以修改对齐方式
}
child{
display: inline;//将子div设置为内联元素
}
<div class="continer">
<div class="child">我是子div</div>
</div>
2、实现div下只有多个子div的水平居中，思路是在多个子div外面再加一个div（假设命名为inner），同时inner设置为水平居中margin：0 auto，然后将多个子div设置在同一行，同时水平居中。代码如下：
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
}
<div class="continer">
<div class="inner">
<div class="child">我是子div1</div>
<div class="child">我是子div2</div>
<div class="child">我是子div3</div>
</div>
</div>
扩展资料：
使元素水平居中的几种方法：
1、如果是内联元素，比如span，img，a，input等，直接使用text-align:center
2、如果是块级元素，比如h1-h6标题元素，div，p，form，section等，方法如下：
1）父元素使用margin:0 auto
2）将块级元素设置为内联元素，使用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;
}
<div class="box">
<section class="inner"></section>
</div>
1 主要的核心思想就是给div设置margin:0 auto ,这样就能居中 。
2 下面是实现 div块级元素水平居中 的代码 ：（在下面的代码 我的div 宽度200px 高度40px 背景颜色是蓝色 文字水平居中） 其实没什么特别好解释的 就是一个样式，是因为百度高质量的回答 我把很简单的问题再解释了一遍，
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>div在页面居中</title>
<style>
div{ width:200px;
height:40px;
background:blue;
text-align:center;
line-height:40px;
margin:0 auto ;
}
</style>
</head>
<body>
<div>我是一个div 我现在要居中</div>
</body>
</html>
3 下面就是显示效果啦 ：
方法如下：
在布局一张网页时，通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中与浏览器中需要一个条件和一个设置。假如最外层DIV盒子的CSS命名为“#divcss5”,这个时候为了兼容各大浏览器实现最外层的这个盒子居中。
一条件：
这个时候对“body”设置css内容居中样式（text-align:center）
即CSS代码：body{text-align:center}
一设置：
这个时候对“#divcss5”设置居中必备样式css margin
即CSS代码：#divcss5{margin:0 auto}
为了便于观察布局居中效果，我们再对“#divcss5”加一个css边框为黑色，css宽度为300px;高度为100px样式。
最终得到DIV居中的CSS代码：
body{ text-align:center}
#divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px}
对应html代码片段：
<div id="divcss5">DIV水平居中案例</div>
居中案例截图
一、使用工具：jQuery、编辑软件
二、方法有三：
1、CSS实现水平和垂直居中：要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的。
2、如果当页面DIV宽度和高度是动态的，比方说需要d出一个DIV层并且要居中显示，DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。
3、 jQuery实现水平和垂直居中：此方法的好处就是不需要知道DIV的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的d出层效果中应用。
三、注意事项：方法二的前提是必需设置DIV的宽度和高度。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）