[HTML,CSS]div+css垂直水平居中-白红宇

[HTML,CSS]div+css垂直水平居中

阅读量：4624 次

发布时间：2019-06-09

本文共 1621 字，大约阅读时间需要 5 分钟。

一.HTML代码如下        
                 
         
     
 
    
   二.为了使div水平垂直居中

1.该方法简单,但是对低版本的IE浏览器有兼容性问题,也是普通web页面模态框常用的方法,css代码如下

.parent{
      width: 500px;     height: 400px;  position: relative; } .child{
      width: 100px;     height: 100px; position: absolute;     top:0;left:0;bottom: 0;right: 0;     margin: auto; } 2.该方法的核心思想就是将外层DIV模拟为表格的一个单元格,这样就可以使用属性vertical-align:middle使设置内部div垂直居中,使用text-align:center水平居中,当然也要设置内部div为行内块使其有行内元素的特性

.parent {
      width:800px;     height:500px; display:table-cell;     vertical-align:middle;     text-align: center; } .child {
      width:200px;     height:200px; display:inline-block;     background-color:red; } 3.主要使用的弹性布局,但是也存在浏览器的兼容性问题

.parent {
      width:800px;     height:500px; display:flex;     justify-content:center;     align-items:center; } .child {
      width:200px;     height:200px;     background-color:red; } 4.其实和第一种方法差不多,只不过不够[智能]

.parent{
      width: 500px;     height: 400px;  position: relative; } .child{
      width: 100px;     height: 100px;     top:50%;left:50%;     margin: auto; 　　 margin-left:-50px; 　　 margin-top:-50px; } .... 前端中的一些常用到的居中整理如下:

水平居中设置

1、行内元素

设置 text-align:center

2、固定宽度的块级元素

设置左右 margin 值为 auto,常见的水平居中为 margin:0 auto;

3、不固定宽度的块级元素

1):在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto

2):给该元素设置 displa:inine 方法

3):父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%

垂直居中设置

1、父元素高度确定的单行文本

设置 height = line-height