css的居中问题

最新推荐文章于 2024-09-20 21:48:23 发布

yuxin_9

最新推荐文章于 2024-09-20 21:48:23 发布

阅读量567

点赞数 1

分类专栏： web前端 css 布局居中文章标签： css 居中

本文链接：https://blog.youkuaiyun.com/qq_21184771/article/details/56340210

版权

web前端同时被 3 个专栏收录

11 篇文章

订阅专栏

css

7 篇文章

订阅专栏

布局

3 篇文章

订阅专栏

居中问题：
这个可以测试居中问题 https://css-tricks.com/centering-css-complete-guide/

水平居中设置

1.如果是图片和文本等内联元素要居中
给父元素设置 text-align:center;（父元素是块级元素才有效）text-align是在块级元素设置，作用于块级元素中的子行内/块行内元素.

2.如果是要被设置的元素是块状元素且是定宽（width:~~px）
margin左右设置为auto： margin-left:auto;margin-right:auto;或者简写为 margin:0 auto;

3.如果是要被设置的元素是块状元素且是多个块级元素

加入table，利用table的自适应宽度，可看做是定宽块状元素，设置margin左右为auto

首先为元素外加入table，tbody, tr , td,将元素套入其中；然后为table添加CSS table{margin:0 auto;}

改变块级元素为内联元素 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%来实现水平居中。

.wrap{float:left;position:relative;left:50%;}
.wrap-center{
background:#ccc;
left:-50%;
position:relative;
}
<body>
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>

把父元素浮动到左边,同时向右偏移50%,相当于把父元素的左边缘对齐到整行的中间

把子元素向右偏移50%,这个50%是父元素的50%,即是wrap的50%,而此时wrap的宽度刚好就等于子元素的宽度,也是子元素本身的50%,这样刚好就居中

4.用flex

父元素：display：flex；[flex-flow:row;] justify-content:center;

.box{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

 -webkit-flex-flow: row wrap;
  flex-flow: row wrap; 
justify-content:center;
}

垂直居中设置

1.父元素高度确定的单行文本居中

设置 父元素height和line-height一致。 ( height: 该元素的高度， line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 ) 。

<div class="container">
    hi,imooc!
</div>
<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

2.父元素高度确定的多行文本居中

插入table（包括tbody,tr,td），同时设置vertical-align:middle（vertical-align只针对于inline-block元素才会起作用）

张鑫旭的这个文章很好 inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用，而是受制于整个line box的变化而不得不变化的。 vertical-align的本质上是个独立的个体，与后面的line水平的元素是不存在直接的关系的。两者没有必然的联系，这是一个需要认识清楚的重要的东西。

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
table td{height:500px;background:#ccc}/*td是默认就是vertical-align:middle*/

chorme firefox IE8以上的浏览器下可设置块级元素的display为table-cell，激活vertical-align:middle但IE6、7不支持这个样式，兼容性比较差，不推荐。

3.知道自身高度的块级元素居中

利用相对绝对定位，top 50%，margin-top:负的一半自身高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

4.不知道自身高度的块级元素居中

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);}

transform兼容性不好， Internet Explorer 10、Firefox、Opera 支持 transform 属性。
考虑margin：auto

http://www.zhangxinxu.com/wordpress/?p=3794

5.用flex

.parent {
   display:flex;
   flex-direction:column;
   justify-content:center;
}

水平垂直均居中

1.知道自身宽高元素居中

利用相对绝对定位，top 50%； left：50%；，margin:负的一半自身高度，宽度；

2.不知道自身宽高元素居中

绝对定位，top left 50%；transform:translate(-50%,-50%);

3.利用Flex