css 垂直居中_css实现水平垂直居中的几种方法

最新推荐文章于 2021-06-26 18:21:29 发布
最新推荐文章于 2021-06-26 18:21:29 发布
阅读量79 收藏
点赞数
文章标签： css 垂直居中 css垂直居中 css居中的几种方法 css水平垂直居中 css清除浮动的几种方法 div垂直居中的方法

css垂直水平居中分为：

定宽居中

方法

①absolute+负margin

②absolute+margin:auto

③absolute+calc

④ min-height: 100vh+flex+margin:auto

不定宽居中

①absolute + transform

②lineheight

③writing-mode

④css-table

⑤flex

⑥grid

一、定宽居中

1、定宽居中(absolute+负maigin)

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px; 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定宽居中</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            border: 1px solid blue;
            position: relative;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 1、定宽高定位：absolute + 负边距margin */
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>

</html>

2、定宽居中(absolute+maigin:auto)

position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto; 
<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            position: relative;
        }
        
        .box.size {
            width: 100px;
            height: 100px;
        }
        
        .box {
            background: green;
            /*2、定宽高定位：absolute + margin:auto */
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box size">
            子元素定宽高
        </div>
    </div>
</body>

</html>

3、定宽居中(absolute+calc)

position:absolute;
top:calc(50% - 50px);
left:calc(50% - 50px); 
<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            position: relative;
        }
        
        .box.size {
            width: 100px;
            height: 100px;
        }
        
        .box {
            background: green;
            /* 3、定宽高定位：（兼容性依赖css3的calc）absolute + 计算属性calc  */
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box size">
            子元素定宽高
        </div>
    </div>
</body>

</html>

4、定宽居中（min-height: 100vh+flex+margin:auto）

<!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>定宽居中</title>
    <style>
        main{
            min-height: 100vh;
            /* vh相对于视窗的高度，视窗高度是100vh */
            /* “视区”所指为浏览器内部的可视区域大小，
            即window.innerWidth/window.innerHeight大小，
            不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 */
            display: flex;
        }
        div{
            width: 50px;
            height: 50px;
            background-color: red;
            margin: auto;
        }
    </style>
</head>

<body>
    <main>
        <div></div>
    </main>
</body>
</html>

二、不定宽居中

1、不定宽高居中：absolute+transform（依赖translate 2d的兼容性）

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); 
<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>不定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            position: relative;
        }
        
        .box {
            background: green;
            /* 1、不定宽高居中：（依赖translate 2d的兼容性）absolute+transform */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box">
            子元素不定宽高
        </div>
    </div>
</body>

</html>

2、不定宽高居中：lineheight

<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>不定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            /* 2、不定宽高居中  */
            text-align: center;
            line-height: 300px;
            font-size: 0px;
        }
        
        .box {
            /* 2、不定宽高居中lineheight */
            display: inline-block;
            vertical-align: middle;
            line-height: inherit;
            text-align: left;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box">
            子元素不定宽高
        </div>
    </div>
</body>

</html>

3、不定宽高居中

<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>不定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            /* 3、不定宽高居中css-table */
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        
        .box {
            /* 3、 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box">
            子元素不定宽高
        </div>
    </div>
</body>

</html>

4、不定宽高居中flex

<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>不定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            /* 4、不定宽高居中flex */
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box">
            子元素不定宽高
        </div>
    </div>
</body>

</html>

5、不定宽高居中grid (css3网格系统grid兼容性不如flex 不推荐使用)

display: grid;
justify-self: center;
align-self: center; 
<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>不定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            /* 5、grid */
            display: grid;
        }
        
        .box {
            /* 5、不定宽高居中grid(兼容性不如flex 不推荐使用) */
            justify-self: center;
            align-self: center;
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box">
            子元素不定宽高
        </div>
    </div>
</body>

</html>

更多学习来自:

Zoomla!逐浪CMS-领先的CMS与移动互联网平台软件研发厂商、北京-上海-南昌三大研发中心、门户站群|商城系统|同步支持MSSQL与Oracle优质CMS解决方案服务商​www.z01.com
afd0bc72628909391ee0bf88f0c7d415.png
weixin_39732866
关注
css 垂直居中的几种实现方法
12-13
今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路： 一、利用 position 和负边距 利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
CSS 实现垂直居中的几种方法(必看)
12-13
说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式...
怎样实现定宽居中 html,水平居中--行内元素、定宽块、不定宽块_html/css_WEB-ITnose...
weixin_31234793的博客
06-26 355
声明：来自http://www.imooc.com/learn/9 学习 行内元素如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。 定宽块状元素满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。1 margin:0 auto; 不定宽块状元素不定宽度的块状元素有三种方法居中(这三种方法目前使...
浅谈CSS定宽居中的奥秘
qq_35389653的博客
12-19 297
CSS样式中水平居中和垂直居中 文本居中对齐 水平居中对齐 文本的水平居中对齐的设置其实很简单，代码如下： .h-center{ text-align: center; } 垂直居中对齐 文本的垂直居中对齐的设置其实很简单， 代码如下： .v-center{ line-height:200px; height:200px; } /如果存在多行的文本，添加以下代码/ .v-center{ line-height:1.5; display: inline-block; vertical-align
div标签和定宽居中
whpu1234的博客
07-30 887
1. &lt;!--div 用于把页面划分成不同区域，即分成许多盒子--&gt; &lt;!--div可设置宽高；不设置宽高，他的宽和父元素等宽，他的高取决与内容--&gt; 2. /*margin外边距 默认值4个值为零 ， 表示元素的四个方向上、下、左、右 只设置一个值，4个值都是这个值 只设置两个值，分别表示上下、左右 设置四个值，分别表示上、下、左、右 设制auto，可以让...
如何让frameset定宽居中
qachenzude的专栏
08-09 3421
其实就是在自己的frameset外在嵌套一层frameset的方法 上面粗体的代码就可以搞定
定宽居中（二）
专注于全栈开发领域
03-06 458
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
CSS水平垂直居中的几种方法总结
09-24
以下就是CSS实现水平垂直居中的几种常见方法： 1. 利用margin:auto实现居中 这是一种常见的居中方式，通常用于块级元素。通过设置元素的position属性为relative，并把left和top属性设为0，再将margin设为auto，...
css3 flex实现div内容水平垂直居中的几种方法
11-21
总的来说，CSS3的Flexbox布局提供了一种强大的方法来处理元素的布局和对齐，使得水平垂直居中变得简单而直观。通过熟练掌握这些基本属性，开发者可以构建出更复杂、更适应不同屏幕尺寸的网页布局。
定宽高的水平垂直居中
Dear_Mr的博客
08-05 819
绝对定位和负magin值效果预览<div class="parent"> <div class="child"></div> </div> div.parent { width: 400px; height: 400px; background: #EDEDED; position: relative; } div.child { width: 200px; heigh
定宽居中-横幅
qq_44692640的博客
04-11 228
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* body默认有一个8像素的外边距，如果不想要 可以手动设置为0 */ body{ /* margin 设置盒子的外边...
不固定宽和高的div 水平和垂直都居中
热门推荐
一直很安静
07-29 1万+
在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。 如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况，我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢？其实这种情况解决的办法也是有很多种，
CSS定宽居中的实现方案
weixin_33806300的博客
01-12 174
方案1：使用flex来布局 .box{ width: 100%; height: 100px; display: flex; } .d1{ flex-grow: 1; flex-shrink: 1; } .d2{ flex-basis: 1080px; background-color: pink; ...
定宽定高情况下块级元素居中的方法
freesky的专栏
09-01 634
定宽定高情况下元素居中的方法 居中元素定宽定高情况 .father{ width: 500px; height: 500px; border:1px solid #000; } .son{ width: 100px; height: 50px; background-color: red; } 1、水平局中：
不定义div的宽度， 如何让内容居中
写了个 bug
03-19 1062
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; .box{bac
css 盒子水平居中（确定宽度和不确定宽度）
maoguiyou的专栏
04-13 9368
说到让一个div水平居中，立马想到最常用的就是margin:0 auto;但是这个的前提是必须知道盒子的宽度，盒子居中主要有两种情况： 一.确定盒子的宽度，解决办法有： 1.1 margin:0 auto; 1.2   position:relative;left:50%;margin-left:-0.5*width;(用绝对定位也可以) 二.不确定盒子宽度的，而且盒子宽度可变的，方法如下
css布局左右定宽，中间自适应
Leon的博客
12-05 3857
一、基于传统的position或者浮动，让其脱离文档流的方法1、position（绝对定位法）绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。
五种CSS技巧实现水平垂直居中
本文将深入探讨如何使用CSS实现水平垂直同时居中的五种方法，这对于布局设计者来说是非常实用的技能。首先，我们来看第一种思路，利用`text-align`属性和`line-height`。通过将`text-align`设置为`center`，使得单行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值