详解html的几种水平垂直居中的方式（基础）

2024-08-26 00:10:03

字体：大中小

来源：转载

供稿：网友

前言

我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。

第一种方法

<!--html盒子代码--><!--水平垂直居中--><div class="Centered1">    <p>d第一种</p></div><!-css样式部分-->   .Centered1{            background-color: #800070;            width: 100%;            height:500px;            position: relative;        }    .Centered1 p{            width: 200px;            height: 200px;            background-color: deeppink;            line-height: 200px;            text-align: center;            position: absolute;            left: 0;            bottom: 0;            right:0;            top: 0;            margin: auto;        }

第二种方法

<!--html盒子代码--><!--水平垂直居中--><div class="Centered2">    <p>d第二种</p></div><!-css样式部分-->/*第二种方法水平垂直居中*/    .Centered2{            background-color: #ef8518;            width: 100%;            height: 500px;            position: relative;        }    .Centered2 p {            position: absolute;            width: 200px;            height: 200px;            background-color:red;            line-height: 200px;            text-align: center;            left: 50%;            top:50%;            margin-left:-100px;            margin-top: -100px;        }

第三种方法

<!--html盒子代码--><!--水平垂直居中--><div class="Centered3">    <p>d第三种</p></div><!-css样式部分-->/*第三种方法水平垂直居中*/    .Centered3{            background-color: dimgrey;            width: 100%;            height: 500px;            position: relative;        }    .Centered3 p {            position: absolute;            width: 200px;            height: 200px;            background-color:darkorange;            line-height: 200px;            text-align: center;            left: 50%;            top: 50%;            transform:translate(-50%,-50%);        }

第四种方法

<!--html盒子代码--><!--水平垂直居中--><div class="Centered4">    <p>d第四种</p></div><!-css样式部分-->/*第四种方法水平垂直居中,老版本flex布局*/    .Centered4{            background-color: #FF4444;            width: 100%;            height: 500px;            display: -webkit-box;            -webkit-box-pack:center;            -webkit-box-align: center;        }    .Centered4 p {            width: 200px;            height: 200px;            background-color:cadetblue;            line-height: 200px;            text-align: center;        }

第五种方法

<!--html盒子代码--><!--水平垂直居中--><div class="Centered5">    <p>d第五种</p></div><!-css样式部分-->/*第五种方法水平垂直居中,新版本的flex水平垂直居中*/    .Centered5{            background-color: darkslateblue;            width: 100%;            height: 500px;            display: flex;            justify-content:center;            align-items: center;        }    .Centered5 p {            width: 200px;            height: 200px;            background-color:fuchsia;            line-height: 200px;            text-align: center;        }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇： HTML中的if判断用法

下一篇：纯css实现（无脚本）Html指令式tooltip文字提示效果