css3水平垂直居中(不知道宽高同样适用)

css水平垂直居中

第一种方法:

    在父div里加:

      display: table-cell;
      vertical-align: middle;
      text-align: center;

    内部div设置 

    display: inline-block;

    例:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css水平垂直居中title>
    <style>
        body {
            margin: 0;
        }

        .center {
            width: 250px;
            height: 250px;
            border: 2px solid red;
            font-size: 18px;

            /* 方法1 */
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .center_inner {
            width: 100px;
            height: 100px;
            background-color: pink;
            
            /* 方法1 */
            display: inline-block;
        } 
    style>
head>

<body>
    <div class="center">
        <div class="center_inner">面朝大海,春暖花开!div>
        
    div>
body>

html>
使父元素内的所有行内元素水平垂直居中(内部div设置display:inline-block即可)。

css3水平垂直居中(不知道宽高同样适用)_第1张图片中间的粉色是居中的div

第二种方法:

  在居中的div元素里加

   /* 第二种方法 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);

例:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css水平垂直居中title>
    <style>
        .center {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 第二种方法 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
        }
    style>
head>
<body>
    <div class="center">海阔天空div>
body>

html>

    translate()函数可以在不知道宽高的情况下,利用它实现水平垂直居中。

    translate(-50%, -50%)作用是,往上(X轴),左(Y轴)移动自身长度的50%,以使其居于中心位置。

    如果使用top:50%, left:50%,是以左上角为原点,故不处于中心位置;但如果知道宽高,可以

            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;            

第三种方法:用弹性布局实现垂直左右居中

display:flex; 设置.wrap为弹性布局

justify-content:center;定义项目在主轴(水平方向)上居中对齐

align-items:center;定义项目在交叉轴(垂直方向)上居中对齐

例:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css水平垂直居中title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .center {
            width: 200px;
            height: 200px;
            border: 2px solid red;
            margin:40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner {
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    style>
head>

<body>
    <div class="center">
        <div class="inner">朝气蓬勃div>
    div>
body>

html>

效果图:

css3水平垂直居中(不知道宽高同样适用)_第2张图片

 

 

  如有疑问请加群,讨论854184700

  css3水平垂直居中(不知道宽高同样适用)_第3张图片

 

 

  

  

 

你可能感兴趣的:(css3水平垂直居中(不知道宽高同样适用))