美文网首页
CSS居中各种情况的解决情况

CSS居中各种情况的解决情况

作者: 就想叫菜鸟 | 来源:发表于2017-10-03 19:00 被阅读0次

CSS居中的几种情况

1. 元素水平居中

  • [ ] 1. 第一种最常见的情况就是在视图或者浏览器中元素的水平居中。
  • 这里我们用一个简单的div的例子进行演示:
//html代码:
<div id="center"></div>

//css代码:
#center {
    height: 200px;
    width: 200px;
    background: #222;
    margin: 0 auto;
}
  • 这里我们当然不能用绝对定位来实现居中,因为不能保证在不同的计算机上都可以实现居中。
  • 这里必须记住的是:如果要采用这种margin为auto的方法,必须要明确声明元素的宽。而元素的高度并不是必要的。
  • 这个方法不仅仅适用于div,也适用于其他的块级元素,例如下面这个例子:
//html代码:
<div id="center">
    <p>关于函数声明,它的重要特征就是函数声明提升,意思是在执行代码之前会先读取函数声明。
    </p>
</div>

//css代码:
#center {
    height: 200px;
    width: 200px;
    background: #222;
    margin: auto;
}
p{
    color: white;
    width: 60%;
    margin: auto;
}
  • [ ] 2. 第二种方法就是使一个绝对定位的元素居中
  • 上面的第一个例子是我们假定元素的定位是position: fixed,下面将来介绍使一个绝对定位的元素居中。
  • 这里我们需要用到left属性,并且需要借用一个公式left = (parent width - element width)/2
//html代码:
<div class="container">
    <div class="box"></div>
</div>

//css代码:
.container {
    width: 300px;
    height: 300px;
    background: #eee;
    position: relative;
    margin: 10px auto;
}

.box {
    width: 100px;
    height: 100px;
    background: #222;
    position: absolute;
    /*计算left的值: (300-100)/2;*/
    left: 100px;
}
  • 这里还有另一种方法:
.container {
    width: 400px;
    height: 400px;
    background: #eee;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    margin: 0 auto;
}
  • [ ] 3. 当父容器的宽度不固定时的居中问题
  • 上面的情形只适用于父容器的宽度固定。但更多的情况是,父元素的宽度并不固定,这时我们将要采用另一种方法。
//html代码:
<div class="container">
    <div class="box"></div>
</div>

//css代码:
.container {
    width: 70%;
    height: 300px;
    background: #eee;
    position: relative;
    margin: 10px auto;
}

.box {
    width: 100px;
    height: 100px;
    background: #222;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    /*transform: translateX(-50%)*/;
    //向左移动自身宽度的一半
}
  • 这里还有另外一种情况,当所需要的居中的元素的宽度也不固定时,可以采用这种方式。
//html代码:
<div class="container">
    <div class="box"></div>
</div>

//css代码
.container {
    width: 70%;
    height: 300px;
    background: #eee;
    position: relative;
    margin: 10px auto;
}

.box {
    width: 70%;
    height: 100px;
    background: #222;
    position: absolute;
    left: 50%;
    margin-left: -35%;
    /*transform: translateX(-50%)*/;
}

2. 元素垂直居中

  • [ ] 4. 同时实现垂直居中和水平居中
  • 首先先来介绍文字的水平居中和垂直居中:
//html代码:
<div class="container">
    <h1>some headline</h1>
</div>

//css代码:
.container {
    width: 400px;
    height: 400px;
    background: #eee;
    margin: 50px auto;
}

h1 {
    text-align: center;
    /*简写*/
    /*font: 40px/400px Helvetica, sans-serif;*/
    font-size: 40px;
    line-height: 400px;
}
  • 下面来介绍一个div在父容器中怎么垂直居中,当其高度固定时,可以使用下面这种方法。
//html代码:
<div class="container"></div>

//css代码:
.container {
    width: 400px;
    height: 400px;
    background: #eee;
    margin: 0 auto;
    position: relative;
    top: 50%;
    margin-top: -200px;
}
html, body {
    height: 100%;
}
//这里一定要设置body, html的高度。
  • 若div高度不确定时,可用另外一种方法:
.container {
    width: 400px;
    height: 30%;
    background: #eee;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
}
html, body {
    height: 100%;
}
  • 还有一种方法实现水平和垂直都居中:
.container {
    width: 400px;
    height: 400px;
    background: #eee;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}
html, body {
    height: 100%;
}

3. 背景图片居中

  • 这里顺便说一句背景图片如何居中:
.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4)     no-repeat center;
  /*background-bottom有九种属性,上面的center即为background-position属性*/
}

相关文章

网友评论

      本文标题:CSS居中各种情况的解决情况

      本文链接:https://www.haomeiwen.com/subject/tqpfyxtx.html