块级元素水平垂直居中方法

一、加padding减height


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        body {
         margin: 0; padding: 0; 
        }   
        .box1 {
            width: 200px;
            height: 150px;
            background-color: #aaa;
            padding-top: 50px; /* 加padding减height*/
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin: 0 auto;

        }
    style>
head>
<body>
    <div class="box1">
        <div class="box2">div>
    div>
body>
html>

块级元素水平垂直居中方法_第1张图片

垂直水平居中方法一:

  • padding-top:(box2高度-box1高度)/ 2
  • height: 原height值 - padding-top值
  • box2:margin: 0 auto (脱离标准流的盒子该属性值失效)

优缺点:

  • 要先知道盒子的宽高,居中盒子不能脱离标准流

二、子绝父相


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        body {
         margin: 0; padding: 0; 
        }   
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #aaa;
            position: relative;

        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    style>
head>
<body>
    <div class="box1">
        <div class="box2">div>
    div>
body>
html>

块级元素水平垂直居中方法_第2张图片

垂直水平居中方法二:

  • box1 positon: realtive && box2 position: absolute
  • box2: top: 50% , margin-top: -(height/2)
  • box2: left: 50% , margin-left: -(width/2)

优缺点:

  • 要先知道盒子的宽高

注:

  • box2盒子直接使用 position: relativepositon: absolute
  • left: top: 或 right: bottom:
  • box2盒子有border属性时,margin-top与margin-left要减去border的宽

三、margin: auto


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        body {
         margin: 0; padding: 0; 
        }   
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #aaa;
            position: relative;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 以下是垂直水平居中关键代码 */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    style>
head>
<body>
    <div class="box1">
        <div class="box2">div>
    div>
body>
html>

块级元素水平垂直居中方法_第3张图片

垂直水平居中方法三:

  • box1 positon: realtive && box2 position: absolute
  • box2盒子 top、left、bottom、right值都设为0
  • box2盒子 添加 margin: auto
  • box2盒子有border属性时,不影响水平垂直居中

优缺点:

  • 可以不需要知道盒子的宽高就能居中
  • 盒子需脱离标准流(positon: absolute),margin: auto垂直方向居中才有效

四、transform: translate(-50%, -50%)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        body {
         margin: 0; padding: 0; 
        }   
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #aaa;
            position: relative;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 以下是垂直水平居中关键代码 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

        }
    style>
head>
<body>
    <div class="box1">box1
        <div class="box2">box2div>
    div>
body>
html>

块级元素水平垂直居中方法_第4张图片

垂直水平居中方法四:

  • box1 positon: realtive && box2 position: absolute
  • box2: top: 50%;left: 50%
  • box2盒子使用 css3属性 transform: translate(-50%, -50%)代替margin实现偏移量,偏移量根据自身盒子宽高用百分比进行宽高偏移
  • box2盒子有border属性时,不影响水平垂直居中

优缺点:

  • 可以不需要知道盒子的宽高就能居中
  • 暂无发现居中属性值失效问题

五、display:table-cell


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        body {
         margin: 0; padding: 0; 
        }   
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #aaa;
            display: table-cell;
            vertical-align: middle;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin: 0 auto;
        }
    style>
head>
<body>
    <div class="box1">
        <div class="box2">div>
    div>
body>
html>

块级元素水平垂直居中方法_第5张图片

优缺点:

  • box1浮动,display: table-cell失效(垂直方向)
  • box2浮动,margin: 0 auto失效(水平方向)

你可能感兴趣的:(CSS)