整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
今天的内容中，廊坊网站建设公司的技术人员将分享下网站导航水平居中设置的方法，其实办法有很多，以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
平居中设置
我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。
这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
如果是定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
第一种做法：
为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
举例如下：
html代码：
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
css代码：
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
第二种做法：
改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：
html代码：
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代码：
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
方法三：
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。
代码如下：
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代码：
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。
页面布局常遇见需要子元素完全居中显示，因此在此总结常见方案。
让黄色块在父容器（灰色块）中水平、垂直居中
黄色方块：宽高100px
灰色方块：宽高400px
下列方法1到方法7，变换前后的图像都是上面2张图（图标注了长度）
默认代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>完全居中</title>
<style>
.parent {
width: 400px;
height: 400px;
background-color: gray;
}
.children {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>下列方法1到方法7，里css代码都是基于上方默认代码
.parent {
/* 弹性布局 */
display: flex;
/* 主轴对齐方式：居中 */
justify-content: center;
/* 侧轴对齐方式（单行）：居中 */
align-items: center;
} .parent {
/* 弹性布局 */
display: flex;
}
.children {
margin: auto;
} .parent {
position: relative;
}
.children {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}分析过程：使用外边距推中间黄色盒子，距离顶端（400-100）/2= 150 px
.parent {
/* 因为margin塌陷问题（子容器的外边距会被父容器用掉）：此处需要显示指明父容器溢出方式 */
overflow: auto;
}
.children {
/* 上下150px，左右自动 */
margin: 150px auto;
}这种方法使用CSS的transform和position属性。这种方法在某些情况下可能比Flexbox或Grid更简单：
.children {
position: relative;
left: 50%;
top: 50%;
/*
transform：2/3D变换关键字
translate是2D位移关键字
x与y都-50%，是因为坐标原点默认是左上角，在left与top移动50%后，黄色盒子处于中心点右下方，因此需要让黄色盒子xy都减去一半
*/
transform: translate(-50%, -50%);
}CSS Grid也是一个强大的布局工具，它也可以用来实现子元素的水平和垂直居中。以下是一个例子：
.parent {
display: grid;
justify-items: center;/* 水平居中 */
align-items: center;/* 垂直居中 */
}通过display设置为table-cell，然后使用text-align 、vertical-align实现水平居中和垂直居中。
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.children {
display: inline-block;
}若父元素宽高确定，子元素宽高不确定，用
将children设为行内元素，运用text-align即可实现水平居中，再借助vertical-align在垂直方向上达到居中效果。最后，将children的行高设定为默认值（line-height具有可继承性，需单独调整子元素的行高）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>完全居中</title>
<style>
.parent {
width: 400px;
height: 400px;
background-color: gray;
text-align: center;
line-height: 400px;
}
.children {
background-color: yellow;
display: inline-block;
vertical-align: middle;
line-height: initial;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">child</div>
</div>
</body>
</html>初始
居中
更多精彩，请关注微信公众号：码圈小橙子
*请认真填写需求信息，我们会在24小时内与您取得联系。
