如何设置水平居中？
分两种情况 行内元素与块级元素
1.行内元素（如图片 文字）
div.textcenter{ text-align:center; } hello joe!
2.块级元素
块级元素的水平居中又分为两种 定宽块状元素 和 非定宽块状元素
立即学习“前端免费学习笔记（深入）”；
定宽块状元素（即块状元素的width值是定值）：
可以通过块级元素的左右margin为auto来实现中 如下
div{ border:1px solid red; width:500px;/*定宽*/ margin:30px auto;/*margin-right margin-left为auto*/ } I am middle placed.
不定宽块状元素（即宽度width不确定 比如网页上的分页导航）
对于不定宽元素实现水平居中有三种方法(常用)：
第一种方法：利用table标签
利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其 内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方 法，使其水平居中
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括
、、 )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
table{ margin: 0 auto; } ul{list-style:none;/*将小圆点去掉*/} li{float:left;display:inline;margin-right:5px;} 第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：
.container{ text-align:center; } .container ul{ display:inine; list-style:none; padding:0; margin:0; } .container li{ display:inline; margin-right:8px; }
与第一种方法相比不用添加无语义标签（table）但是由于li被视作行内元素，所以无法为其设定height,width等属性
第三种方法：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
.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; }
2.如何设置垂直居中？
分为两种情况，父元素高度确定的单行文本，父元素高度确定的多行文本。
单行文本：通过设置line-height 与 height一致实现垂直居中
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
.container{ line-height:100px; height:100px; background:purple;}Hello World!
但是该方法有一个弊端：当文字的长度长于块的宽度的时候，内容就脱离了块。
多行文本：
有两种方法：
使用table标签 使用vertical-align:middle（注意td标签默认就设置了vertical-align:middle
所以不需要我们手动设置。
table td{height:500px;background:#purple;}| I am centered I am centered I am centered I am centered I am centered |
最后一个技巧
隐式的改变display的属性 当为元素设置以下两个语句之一的话：
float:right 或者float:right
position:absolute
元素的display类型就会自动变为display:inline-block 此时就可以设置元素的宽和高了例如
.container a{ position:absolute; width:100px; height:50px; background:purple;}
以上就是CSS进阶之CSS的技巧分享的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608201.html
微信扫一扫 
支付宝扫一扫 
