欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-02 21:27:02
一.水平居中 1.文字水平居中
测试居中
2.盒子居中 < ......

一.水平居中

1.文字水平居中

<div class="one">
  测试居中
</div>
<style>
.one{
  width: 200px;
  height: 100px;
  border:1px solid red;
  text-align: center;
}
</style>
水平,垂直居中的15种方法

2.盒子居中

<div class="one">是盒子居中</div>
<style>
.one{
  width: 200px;
  height: 100px;
  border:1px solid red;
  margin: 0 auto;
}
</style>
水平,垂直居中的15种方法
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>
水平,垂直居中的15种方法
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- */
        }
水平,垂直居中的15种方法

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>
水平,垂直居中的15种方法

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>

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

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 */
水平,垂直居中的15种方法

三,水平居中,垂直居中

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;
  background-color: deeppink;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
</style>
大家有好的方法就留言哈