CSS-水平垂直居中的15种方法

一.水平居中

1.文字水平居中

<div class="one">

  测试居中

</div>

<style>

.one{

  width: 200px;

  height: 100px;

  border:1px solid red;

  text-align: center;

}

</style>

2.盒子居中

<div class="one">是盒子居中</div>

<style>

.one{

  width: 200px;

  height: 100px;

  border:1px solid red;

  margin: 0 auto;

}

</style>

3.多块级元素水平居中

<div class="container">

<div class="child">

简单不先于复杂

</div>

<div class="child">

而是在复杂之后

</div>

<div class="child">

简单不先于复杂,而是在复杂之后。

</div>

<div class="child">

简单不先

</div>

</div>

<style>

.container {

  height:100px;

  padding: 8px;

  text-align: center;

  border: 2px dashed #f69c55;

}

.child {

  padding: 8px;

  width: 4rem;

  margin: 0 8px;

  color: #fff;

  background: #000;

  display: inline-block;

}

</style>

4.弹性布局,多块级水平居中

<div class="flex-center">

<div>

测试1

</div>

<div>

测试2测试2测试2测试2测试2测试2测试2

</div>

<div>

测试3测试3测试3测试3

</div>

</div>

<style>

.flex-center {

  width: 800px;

  padding: 8px;

  display: flex;

  justify-content: center;

  border: 2px dashed #f69c55;

}

.flex-center >div {

  padding: 8px;

  width: 100px;

  margin: 0 8px;

  color: #fff;

  background: #000;

}

</style>

display: flex;兼容性不好可以这样解决:最少支持ie10以上

.flex-center{ display: -webkit-flex; /* 新版本语法: Chrome 21+ */

       display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

      display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

      display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */

     }

.flex-center>div { -webkit-flex: 1; /* Chrome */

        -ms-flex: 1 /* IE 10 */

        flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */

         -webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */

        -moz-box-flex: 1; /* OLD - Firefox 19- */

        }

5.垂直居中

1.元素是display:block和display:inline-block都可以使用height:100px ,line-height:100px;

2.利用display:table-cell

<div class="center-table">

<p class="v-cell">The more technology you learn</p>

</div>

<style>

.center-table {

  width: 800px;

  display: table;

  height: 140px;

  border: 2px dashed #f69c55;

}

.v-cell {

  display: table-cell;

  vertical-align: middle;

}

</style>

3.用flex布局

<div class="center-flex">

  <p>Dance like nobody </p>

</div>

<style>

.center-flex {

  width: 500px;

  height: 140px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  border: 2px dashed #f69c55;

}

</style>

4.块级元素固定高度(这个应该是大家最熟悉的,例子就不放了)

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

5.不知高度

<div class="parent">

<div class="child">世界上有 10 种人,懂二进制的和不懂二进制的。</div>

</div>

<style>

.parent {

height: 140px;

position: relative;

border: 2px dashed #f69c55;

}

.child {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: black;

  color: #fff;

  padding: 1rem;

  width: 12rem;

}

</style>

transform的兼容性:

transform: translate(50px,100px);
-ms-transform: translateY(-50%)		/* IE 9 */
-webkit-transform:  translateY(-50%)	/* Safari and Chrome */
-o-transform: translateY(-50%)/* Opera */
-moz-transform:  translateY(-50%);	/* Firefox */

三,水平居中,垂直居中

1.固定宽高的水平垂直居中(大家熟悉的)

parent {

    position: relative;
}
.child {
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
}2.不知宽高-水平垂直居中
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
3.flex布局(上面水居中和垂直居中有例子就不写了)
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
4.利用grid实现水平垂直居中,兼容性较差,不推荐。
.parent {
  height: 140px;
  display: grid;
}
.child {
  margin: auto;
}5.弹窗的水平居中(截图不好放,就不放了,大家粘贴就可以运行)

<div class="element">

<div>水平垂直居中了,好开心哦</div>

</div>

<style>

.element{

  width: 300px;

  height: 300px;

  

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  margin: auto;

}

</style>

原文地址:https://www.cnblogs.com/WWZ1515389790/p/8695550.html

时间: 2024-10-17 12:18:15

CSS-水平垂直居中的15种方法的相关文章

CSS水平垂直居中的几种方法

直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468; } img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } HTML代码: <div> <img src="mm.jpg&quo

CSS水平垂直居中的几种方法2

直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468; } img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } HTML代码: <div> <img src="mm.jpg&quo

顽石系列:CSS实现垂直居中的五种方法

顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https://blog.csdn.net/bwf_erg/article/details/69844527 MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align 六种方法:https://www.jianshu.com/p/08

水平,垂直居中的15种方法

一.水平居中 1.文字水平居中 <div class="one"> 测试居中 </div> <style> .one{ width: 200px; height: 100px; border:1px solid red; text-align: center; } </style> 2.盒子居中 <div class="one">是盒子居中</div> <style> .one{ w

CSS子元素在父元素中水平垂直居中的几种方法

1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 300px; border: 1px solid red; } #div1 p { width: 100px; height: 100px; background-color: green; /*float: left; !*如果设置了浮动,则自动居中就会失效.*!*/ margin: 0 auto;

CSS实现垂直居中的5种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中无效.下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点.(可以看看测试页面,有简短解释.) 方法一: 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性. <div id="wrapper"&g

[转]-CSS 元素垂直居中的6种方法

原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/ 利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进行元素的垂直居中的方

CSS 元素垂直居中的 6种方法

利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可. Line-Height Method 试用:单行文本垂直居中,demo 代码: html 1 2 3 <div id="parent"> <div id="child&quo

CSS 元素垂直居中的 6种方法(转)

转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/ 利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进行元素的垂直居中的方法,

(转)CSS 元素垂直居中的 6种方法

利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可. Line-Height Method 试用:单行文本垂直居中,demo 代码: html 1 2 3 <div id="parent"> <div id="child&quo