在div+CSS布局中，水平、垂直局中是很常用的，但对于像我这样的小白来说，经常会出现有些CSS设置不起作用，后来就网上搜索一些资料研究了一番，现在总结如下，以后好翻看。
对于行内元素、块状元素，定宽的元素、不定宽的元素，水平、垂直局中的设置都是不一样的。
当子元素为行内元素，对父元素设置text-align:center;
2、定宽块状元素当子元素为定宽块状元素，设置左右margin值为auto，如：margin:0 atuo;
3、不定宽块状元素我们经常会遇到不定宽度块级元素的使用，如分页导航，因为分页的数目不定，所以不能用宽度限制住。此时对元素进行水平居中主要有三种方式：
加入 table 标签设置 display;inline 方法设置 position:relative 和 left:50%;（1）加入 table 标签第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。
第二步：为这个 table 设置“左右 margin:auto”（这个和定宽块状元素的方法一样）。
HTML结构：
<div> <table> <tbody> <tr><td> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody> </table></div>CSS样式
<style> table{ margin:0 auto; } ul{List-style:none;margin:0;padding:0;} li{float:left;display:inline;margin-right:8px;}</style>缺点：是增加了无语义的HTML标签，增加了嵌套深度
（2）设置 display：inline 方法改变块级元素的 dispaly 为 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; } .container ul{ List-style:none; margin:0; padding:0; display:inline; } .container li{ margin-right:8px; display:inline; }</style>缺点：将块级元素的display设置为inline，于是少了很多功能，比如盒子模型
（3）设置 position:relative 和 left:50%;通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
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{ 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>这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度。
缺点：设置了 position:relative，带来了一定的副作用。
flex布局，对父元素设置display:flex;justify-content:center;
这四种方法各有利弊，根据实际情况选用。
垂直居中 1、父元素高度确定的单行文本设置父元素的height等于行高line-height。注意：如果多行内联文本这样设置就会被切割成几部分，很难看，如下：
2、父元素高度确定的多行文本 3、父元素高度不确定的多行文本以上有三种情况详解请看：https://segmentfault.com/a/1190000003111071
4、通用方案flex布局，给父元素设置{display:flex; align-items:center;}。
总结以上是内存溢出为你收集整理的CSS实现水平局中、垂直局中详解全部内容，希望文章能够帮你解决CSS实现水平局中、垂直局中详解所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）