CSS实现水平垂直同时居中的5种思路

水平居中垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路

思路一: text-align + line-height实现单行文本水平垂直居中

<style>
.test{
    text-align: center;
    line-height: 100px;
}
</style>

<div class="test" style="background-color: lightblue;width: 200px;">测试文字</div>   

思路二: text-align + vertical-align

【1】在父元素设置text-alignvertical-align,并将父元素设置为table-cell元素,子元素设置为inline-block元素

  [注意]若兼容IE7-浏览器,将结构改为<table>结构来实现table-cell的效果;用display:inline;zoom:1;来实现inline-block的效果

<style>
.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child{
    display: inline-block;
}
</style>

<div class="parent" style="background-color: gray; width:200px; height:100px;">
  <div class="child" style="background-color: lightblue;">测试文字</div>
</div> 

【2】若子元素是图像,可不使用table-cell,而是其父元素用行高替代高度,且字体大小设为0。子元素本身设置vertical-align:middle

<style>
.parent{
    text-align: center;
    line-height: 100px;
    font-size: 0;
}
.child{
    vertical-align: middle;
}
</style>

<div class="parent" style="background-color: gray; width:200px; ">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</div>  

思路三: margin + vertical-align

  要想在父元素中设置vertical-align,须设置为table-cell元素;要想让margin:0 auto实现水平居中的块元素内容撑开宽度,须设置为table元素。而table元素是可以嵌套在tabel-cell元素里面的,就像一个单元格里可以嵌套一个表格

  [注意]若兼容IE7-浏览器,需将结构改为<table>结构

<style>
.parent{
    display:table-cell;
    vertical-align: middle;
}
.child{
    display: table;
    margin: 0 auto;
}
</style>

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <div class="child" style="background-color: lightblue;">测试文字</div>
</div>  

思路四: 使用absolute

【1】利用绝对定位元素的盒模型特性,在偏移属性为确定值的基础上,设置margin:auto

<style>
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    width: 80px;
    margin: auto;
}
</style>

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <div class="child" style="background-color: lightblue;">测试文字</div>
</div>  

【2】利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果

  [注意]IE9-浏览器不支持

<style>
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
</style>

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <div class="child" style="background-color: lightblue;">测试文字</div>
</div>  

【3】在子元素宽高已知的情况下,可以配合margin负值达到水平垂直居中效果

<style>
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 60px;
    margin-left: -40px;
    margin-top: -30px;
}
</style>

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <div class="child" style="background-color: lightblue;">测试文字</div>
</div>  

思路五: 使用flex

  [注意]IE9-浏览器不支持

【1】在伸缩项目上使用margin:auto

<style>
.parent{
    display: flex;
}
.child{
    margin: auto;
}
</style>

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <div class="child" style="background-color: lightblue;">测试文字</div>
</div>  

【2】在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

<style>
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <div class="child" style="background-color: lightblue;">测试文字</div>
</div>  
时间: 2024-10-09 03:35:19

CSS实现水平垂直同时居中的5种思路的相关文章

css 元素水平垂直方向居中

一.text-align:center;vertical-align:middde: html部分 <div class="parent"> <div class="child"> </div> </div> css部分 .parent{ width: 400px; height:400px; background:#666666; text-align: center; font-size: 0px; } .chil

CSS 布局 - 水平 &amp; 垂直对齐的集中方法案例解析

CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘. 元素通过指定宽度,并将两边的空外边距平均分配: div 元素是居中的 实例 .center{margin:auto; width:50%; border:3pxsolidgreen; padding:10px; } 注意: 如果没有设置 width 属性(或者设置 100%),

CSS div水平垂直居中和div置于底部

一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_center { position: absolute; top: 50%; left: 50%; margin-left: -180px; /*要居中的div的宽度的一半*/ margin-top: -120px; /*要居中的div的高度的一半*/ } 三.div置于底部(footer) .bot

Translate实现水平垂直绝对居中

translate实现绝对居中效果. translate一直是我实现居中效果众多属性中最多的一个属性,我认为这个属性简单,使用方便,在此小记. translate(X,Y)定义2D转换,其中X是定义X轴的值,Y轴是定义Y轴的值. position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform:trans

css flexbox水平垂直

display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -moz-flex;display: -ms-flexbox;display: flex; /* 水平居中*/-webkit-box-align: center;-moz-box-align: center;-ms-flex-pack:center;/* IE 10 */ -webkit-justify-content: center;-moz-justif

526,水平垂直均居中的方法

使用flex-box布局(要注意flex在ie9以下是用不了的) eg,父元素{   justfy-content:center,align-item:center:display:flex:} 对于已知宽高的元素,可以父元素:position:relative: 子元素:position:absolute:top:0: left:0:bottom:0:right:0:margin:auto: 原文地址:https://www.cnblogs.com/1998Archer/p/12392994.

【CSS】absolute 元素完全居中的两种方法

方法一:(不能微调) position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 方法二:(可微调) position:absolute; top:50%; left:50%; margin-top:-100px;(元素高度的一半) margin-left:-100px;(元素宽度的一半)

css实现水平 垂直居中

css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平居中</title> <style> .box1{ border: 1px solid #000; text-align: center; } .box2{ display: inline-block; backgroun

CSS实现居中的7种方法

实现HTML元素的居中 看似简单,实则不然 水平居中比如容易,垂直居中比较难搞定,水平垂直都居中更不容易.在这个响应式布局的年代,很难固定元素的宽高,俺统计了一下,目前的几种方法.本文由浅入深逐个介绍,使用了同一段HTML代码: <div class="center"> <img src="jimmy-choo-shoe.jpg" alt=""> </div> 下面鞋子图片会变化但原始大小始终是500px ×