• css常见居中方式

    文章目录

    前言

    页面布局基本都会有居中样式，包括水平居中、垂直居中等

    一、水平居中

    1、使用text-align + inline-block水平居中

    DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用 text-align + inline-block 水平居中title>
<style>
    .wrap{
        height: 200px;
        text-align: center;
        border: 1px solid red;
    }
    .wrap .text{
        height: 100px;
        width: 300px;
        display: inline-block;
        border: 1px solid blue; 
    }
style>
head>
<body>
    <div class="wrap">
        <div class="text">我是元素1div>
    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    2、使用定位postion + 变形transform水平居中

    DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用定位（postion） + 变形（transform）水平居中title>
    <style>
        .wrap {
            height: 200px;
            border: 1px solid red;
            position: relative;
        }

        .wrap .text {
            height: 100px;
            width: 300px;
            border: 1px solid blue;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    style>
head>

<body>
    <div class="wrap">
        <div class="text">我是元素1div>
    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    3、使用 margin: 0 auto + display: block 水平居中

    DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用 margin: 0 auto + display: block 水平居中title>
    <style>
        .wrap {
            height: 200px;
            border: 1px solid red;
        }

        .wrap .text {
            height: 100px;
            width: 300px;
            display: block;
            border: 1px solid blue;
            margin: 0 auto;
        }
    style>
head>

<body>
    <div class="wrap">
        <span class="text">我是元素1span>
    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    4、使用css3新特性flex弹性盒子布局水平居中

    DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>flex弹性盒子布局水平居中title>
    <style>
       .wrap {
            height: 200px;
            border: 1px solid red;
            display: flex;
            justify-content: center;
        }
        .wrap .text {  
            border: 1px solid blue;
        }
    style>
head>

<body>
    <div class="wrap">
        <span class="text">我是元素1span>
    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    二、垂直居中

    1、固定高度（height） = 行高（line-height）

    DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>固定高度（height） = 行高（line-height）title>
    <style>
        .wrap {
            height: 300px;
            line-height: 300px;
        }

        .wrap .text {
            border: 1px solid blue;
        }
    style>
head>

<body>
    <div class="wrap">
        <div class="text">我是元素1div>
    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    2、使用定位（postion） + 变形（transform）垂直居中

    DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用定位（postion） + 变形（transform）垂直居中title>
    <style>
        .wrap {
            height: 600px;
            width: 300px;
            border: 1px solid red;
            position: relative;
        }

        .wrap .text {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        #div1 {
            width: 300px;
            height: 200px;
            background-color: #ccc;
            position: relative;
        }

        #div2 {
            width: 100px;
            height: 100px;
            background-color: #FB7299;
            margin: auto;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    style>
head>

<body>
    <div class="wrap">
        <div class="text">我是元素1div>
    div>
    <div id="div1">
        <div id="div2">
            子容器的垂直居中
        div>
    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    3、使用display: table-cell + vertical-align 垂直居中

    DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>display: table-cell + vertical-align 垂直居中title>
    <style>
        .wrap {
            height: 600px;
            width: 300px;
            border: 1px solid red;

            display: table-cell;
            vertical-align: middle;
        }

        .wrap .text {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
        }

        #div1 {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            /* 使容器水平边距自动相等 */
            border: 1px solid red;
            /* 给文本加上边框可以更清楚地看到效果 */
            display: table;
        }

        #div2 {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 100%;
        }
    style>
head>

<body>
    <div class="wrap">
        <div class="text">我是元素1div>
    div>
    <div id="div1">
        <div id="div2">
            多行文本的垂直居中
            多行文本的垂直居中
            多行文本的垂直居中
            多行文本的垂直居中
            多行文本的垂直居中
        div>
    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    4、使用css3新特性flex弹性盒子布局垂直居中

    DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>flex弹性盒子布局垂直居中title>
    <style>
        .wrap {
      height: 600px;
      width: 300px;
      border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .wrap .text {  
      width: 300px;
      height: 100px;
      border: 1px solid blue;
  }
    style>
head>

<body>
    <div class="wrap">
        <div class="text">我是元素1div>
    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
  • 相关阅读:
    5个月的精华：Spring/SpringBoot扩展点手册：手册在手，编码无忧：全网独一份 - 第451篇
    计算机毕业设计 高校普法系统的设计与实现 Java实战项目 附源码+文档+视频讲解
    【软考-中级】系统集成项目管理工程师 【16 变更管理】
    矩阵起源加入 OpenCloudOS 操作系统开源社区，完成技术兼容互认证
    SpringBoot运行原理
    C# NX二次开发-设置背景颜色
    如何找到适合自己的股票程序化交易接口模式？
    C语言天花板——指针（进阶1）
    C语言题目讲解
    Git入门实战教程之创建版本库
  • 原文地址：https://blog.csdn.net/weiCong_Ling/article/details/134283824