关于网页设计制作（布局）过程中，如果让内容居中，分为以下几种情况：
1、文本，图片等内联元素的水平居中。text-align:center
2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：0 auto
3、不定宽块状元素水平居中
方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto
方案二：将子元素转换为内联块状元素，给父元素设置text-align:center;
4、不定宽高的元素在屏幕窗口水平垂直都居中
5、不定宽高元素在父元素中水平垂直都居中
-----------------------------以下为详细内容-------------------------------------------------
1、文本，图片等内联元素的水平居中。
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center;来实现的。
如：
-
<style type="text/css">
-
.imgBox{
-
border: 1px solid black;
-
text-align: center;
-
}
-
h1{
-
border: 1px solid black;
-
text-align: center;
-
}
-
.menu{
-
border: 1px solid black;
-
text-align: center;
-
}
-
form{
-
border: 1px solid black;
-
text-align: center;
-
}
-
</style>
-
</head>
-
<body>
-
<!-- 一张图片在父容器中水平居中 -->
-
<div class="imgBox">
-
<img src="img/pic2.png"/>
-
<span style="background-color: red;">我是span </span>
-
</div>
-
<!-- 文本内容在父容器中水平居中 -->
-
<h1>我是标题 </h1>
-
<!-- 内联元素在父容器中水平居中 -->
-
<div class="menu">
-
<a href="#">新闻资讯 </a>
-
<a href="#">课程介绍 </a>
-
<a href="#">关于我们 </a>
-
<a href="#">在线留言 </a>
-
<a href="#">师资力量 </a>
-
<a href="#">联系我们 </a>
-
</div>
-
<form action="">
-
<input type="text"/>
-
<input type="submit" value="百度一下"/>
-
</form>
-
</body>
-
</html>
2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：0 auto
-
<style type="text/css">
-
body, div, p, ol, ul, li, dl, dt, dd, form, table, tr, td, h1, h2, h3, h4, h5, h6, hr, figure, input, textarea{
-
margin: 0;
-
padding: 0;
-
}
-
.header{
-
width: 100%;
-
height: 100px;
-
background: black;
-
}
-
.header_con{
-
width: 1000px;
-
height: 100px;
-
background: red;
-
margin: 0 auto;
-
}
-
</style>
-
</head>
-
<body>
-
<!-- 定宽块状元素在浏览器窗口或父容器中水平居中 -->
-
<div class="header">
-
<div class="header_con"> </div>
-
</div>
-
<!-- 总结：满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的 -->
-
</body>
3、不定宽块状元素水平居中
方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto
-
<style type="text/css">
-
-
.box1{
-
display: table;
-
margin: 0 auto;
-
}
-
.box1 a{
-
display: block;
-
float: left;
-
padding: 3px 5px;
-
}
-
-
</style>
-
</head>
-
<body>
-
<!-- 网页中的分页效果，分页的页数不定，但是始终是居中的效果，如何实现？ -->
-
<!-- 方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto -->
-
<!-- 当我们随意改变a的数量时，会发现他们始终是居中的 -->
-
<div class="box box1">
-
<a href="#">首页1 </a>
-
<a href="#">上一页 </a>
-
<a href="#">1 </a>
-
<a href="#">2 </a>
-
<a href="#">3 </a>
-
<a href="#">4 </a>
-
<a href="#">5 </a>
-
<a href="#">下一页 </a>
-
<a href="#">尾页 </a>
-
</div>
-
</body>
-
</html>
方案二：
将子元素转换为内联块状元素，给父元素设置text-align:center;
-
<style type="text/css">
-
.box2{
-
margin-top: 50px;
-
text-align: center;
-
}
-
-
.box2 a{
-
padding: 3px 5px;
-
border: 1px solid blue;
-
margin: 0 3px;
-
text-decoration: none;
-
color: #333;
-
font-size: 12px;
-
display: inline-block;
-
}
-
</style>
-
</head>
-
<body>
-
<!-- 网页中的分页效果，分页的页数不定，但是始终是居中的效果，如何实现？ -->
-
-
<!-- 方案二：将a转换为内联块状元素，给父元素设置text-align:center; -->
-
<div class="box box2">
-
<a href="#">首页 </a> <a href="#">上一页 </a> <a href="#">1 </a> <a href="#">2 </a> <a href="#">3 </a> <a href="#">4 </a> <a href="#">5 </a> <a href="#">下一页 </a> <a href="#">尾页 </a>
-
</div>
-
</body>
-
</html>
4、不定宽高的元素在屏幕窗口水平垂直都居中
-
<style type="text/css">
-
/*body,div,p,ol,ul,li,dl,dt,dd,form,table,tr,td,h1,h2,h3,h4,h5,h6,hr,figure,input,textarea{
-
margin: 0;
-
padding: 0;
-
}*/
-
-
/*方案一：屏幕窗口的居中，使用固定定位，将四个方向的值全部设置为0，然后设置margin为auto，自动计算上下左右的margin值*/
-
.imgs{
-
position: fixed;
-
left: 0;
-
right: 0;
-
top: 0;
-
bottom: 0;
-
margin:auto;
-
}
-
-
-
/*方案二*/
-
/*使用弹性盒的方式实现，首先给html，body设置宽度为100%，然后给body设置主轴，交叉轴对齐方式为center*/
-
/*html,body{
-
height: 100%;
-
}
-
body{
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
}*/
-
-
/*方案三*/
-
/*使用css3中transform变形中的translate来实现水平垂直都居中*/
-
/*.imgs{
-
position: fixed;
-
left: 50%;
-
top: 50%;
-
transform: translate(-50%,-50%);
-
}*/
-
</style>
-
</head>
-
<body>
-
<img class="imgs" src="img/pic2.png"/>
-
</body>
-
</html>
5、不定宽高元素在父元素中水平垂直都居中
-
<style type="text/css">
-
-
/*.father{
-
width: 800px;
-
height: 500px;
-
background: gray;
-
position: relative;
-
}*/
-
/*方案一：给父元素相对定位，给子元素绝对定位*/
-
/*.imgs{
-
position: absolute;
-
left: 0;
-
top: 0;
-
right: 0;
-
bottom: 0;
-
margin: auto;
-
}*/
-
-
/*方案二：使用css3的translate实现*/
-
-
/*.imgs{
-
position: absolute;
-
left: 50%;
-
top: 50%;
-
transform:translate(-50%,-50%);
-
}*/
-
-
/*方案三：非父元素设置table-cell,将父元素转换为表格单元格形式*/
-
-
/*.father{
-
width: 800px;
-
height: 500px;
-
background: gray;
-
display: table-cell;
-
text-align: center;
-
vertical-align: middle;
-
}
-
.imgs{
-
vertical-align: bottom;
-
}*/
-
-
/*方案四：给img添加一个参照物span，并设置高度为100%*/
-
/*.father{
-
width: 800px;
-
height: 500px;
-
background: gray;
-
text-align: center;
-
}
-
.father span{
-
display: inline-block;
-
width: 0;
-
height: 100%;
-
vertical-align: middle;
-
}
-
.imgs{
-
vertical-align: middle;
-
}*/
-
-
-
/*方案五：使用弹性盒的方式实现*/
-
.father{
-
width: 800px;
-
height: 500px;
-
background: gray;
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="father">
-
<img class="imgs" src="img/pic2.png"/>
-
<!-- <span></span> -->
-
</div>
-
</body>
-
</html>
-