整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
通常首选方法是使用flexbox居中内容。只需三行代码即可：display:flex，然后使用 align-items:center 和 justify-content:center 将子元素垂直和水平居中。
如下代码：
html：
<div class="flexbox-centering">
<div>Centered content.</div>
</div>css：
.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}使用grid(网格)与flexbox非常相似，也是一种常见的技术，尤其是布局中已经使用网格的情况下。与前一种flexbox技术的唯一区别是它显示为栅格。
如下代码：
html:
<div class="grid-centering">
<div class="child">Centered content.</div>
</div>css:
中，是我们编码过程中最常见的，那么，我们平时常见的居中方式，下面一一罗列出来，有错误的地方，望码友多多包涵并加以矫正。
水平居中
1、多块级元素，设置display:inline-block;使之在一行排列,在父级样式里，设置text-align：center;就可以实现水平居中的效果
body {
text-align: center;
}
div{
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
}
2、内联元素，利用text-align：center;可以实现块级元素内部的内联元素的水平居中
div {
border: 1px solid red;
width: 100px;
height: 100px;
text-align: center;
}
<div>
<span>块级元素中的行内元素的水平居中</span>
</div>
3、块级元素，通过把固定宽高的块级元素的margin-left和margin-right设置为auto，方可实现
div{
width: 100px;
height: 100px;
border: 1px solid;
margin： 0 auto;
}
<div></div>
4、利用弹性盒子（display: flex;）
给父级定宽定高，然后设置display: flex;以及justify-content: center;方可达到水平居中效果
body {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
border: 1px solid red;
}
div {
width: 100px;
height: 100px;
border: 1px solid;
}
<body>
<div></div>
</body>
垂直居中
1、内联元素（单行）
通过设置元素的height和line-height,方可达到居中效果
2、多行元素，利用表布局（table）
通过给想要居中的元素的父级设置display: talbe-cell;以及vertical-align：enter;方可居中
3、弹性盒子（flex）
给父级设置display: flex;变成弹性盒子。
分两种，
（1），主轴方向为水平，直接设置 align-items: center;
（2），主轴方向为垂直，设置flex-direction: column;改变主轴方向，然后设置justify-content: center;
弹性盒模型主轴不同，居中的方式也不同，灵活应用。
4、固定宽高的块级元素
利用父相子绝的定位原理，实现垂直居中
position: absolute;
left: 50%;
top: 50%;
margin-left: (自身高度的一半);
5,未知宽高的块级元素
利用transform: translateY(-50%);方可实现
position: absolute;
top: 50%;
transform: translateY(-50%);
水平垂直方向的居中
1、固定宽高
通过margin平移整体宽高的一半，实现水平垂直居中
{
position: absolute;
width: 100px;
height: 100px;
border: 1px solid;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
2、未知宽高
利用transform中的translate()属性实现
{
position: absolute;
border: 1px solid;
left: 50%;
top: 50%;
transform: translateY(-50%);
transform: translateX(-50%);
}
3、弹性盒子（flex）
通过display：flex，把父级变成弹性盒模型，利用align-items: center;justify-content: center;方可实现居中。
注意：弹性盒子容器中，多行项目的居中方式另加计算。
body {
border: 1px solid;
width: 300px;
height: 300px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
div {
border: 1px solid;
width: 100px;
height: 100px;
}
随着学习的不断深入，居中方式可以有很多种，我们要善于利用，更加明确什么情况下用怎样的居中方式。
今天的内容中，廊坊网站建设公司的技术人员将分享下网站导航水平居中设置的方法，其实办法有很多，以CSS代码为例，这种代码操作很方便，后期修改的时候也简单，以下是详细的实例操作。
方法一：使用display:inline-block控制
这个方法比较简单，是将容器转成display:inline-block行内块级元素，然后就可以直接用text-align:center使其达到水平居中效果。HTML代码中需要一个div来包围这个导航菜单。
方法二：使用position:relative解决
position:relative定位方法来让元素水平居中，一般来说小编推荐这方法，因为代码多了个div去包住，当然这些是根据情况来使用的。将定位div设为浮动，再定位left:50%,然后导航定位至left:-50%。
方法三：使用display:table解决
HTML代码实例
<ul class="navbar">
<li><a href="/">Home</a></li>
</ul>
CSS代码实例
.navbar {
display:table;
margin:0 auto;
}
.navbar li {
display:table-cell;
}
.navbar li + li {
padding-left:20px;
}
方法四：使用display:inline-flex解决
HTML代码实例操作
<div class="navbar">
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
CSS代码代码编写
.navbar {
text-align:center;
}
.navbar > ul {
display:-webkit-inline-box;
display:-moz-inline-box;
display:-ms-inline-flexbox;
display:-webkit-inline-flex;
display:inline-flex;
}
.navbar li + li {
margin-left:20px;
}
提示：浏览器兼容问题，目前这个代码不支持IE7及以下版本的IE浏览器。
其实这些方法很好的解决了网站导航菜单居中的问题，使用CSS编写有助于后期的修改，极大的方便了我们的操作和节省了宝贵的时间。在以后的内容中，小编还将会继续为朋友们分享更多更有价值的知识。
原创文章出自畅想网络，转载地址：http://www.e-wkj.cn/xw/2316.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
