水平居中和垂直居中

最新推荐文章于 2023-09-30 13:11:25 发布
最新推荐文章于 2023-09-30 13:11:25 发布
阅读量398 收藏
点赞数
分类专栏： HTML+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43684713/article/details/88539033
版权

整理一下。。。

水平居中

块级元素：给元素设置magin:0 auto;


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width: 200px;
            height: 200px;
            background-color: plum;
            margin: 0 auto;//水平居中
        }
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

行级元素:给父级元素设置text-align:center;


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width: 200px;
            height: 200px;
            background-color: plum;
            text-align: center;//子元素水平居中
        }
    </style>
</head>
<body>
<div class="block">
    <span>很高兴认识你</span>
</div>
</body>
</html>

输出结果：

垂直居中

块级元素

1.绝对定位+相对定位


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #f5ff9b;
        }
        .block_1{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            background-color: palevioletred;
            margin: -50px 0 0 0;
        }

    </style>
</head>
<body>
<div class="block">
    <div class="block_1"></div>
</div>
</body>
</html>

输出结果：

注意：如果不知道被垂直居中的块级元素的大小则无法实现。

2.使用transform

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #f5ff9b;
        }
        .block_1{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            background-color: palevioletred;
            transform: translate(0,-50%);
        }
    </style>
</head>
<body>
<div class="block">
    <div class="block_1"></div>
</div>
</body>
</html>

3.使用绝对定位和负外边距

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #f5ff9b;
        }
        .block_1{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            background-color: palevioletred;
            margin: -25% 0 0 0;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="block_1"></div>
</div>
</body>
</html>

注意：使用magin来实现垂直居中必须依赖于子元素相对于父元素的百分比，这种方法有局限性。

4.绝对定位后设置top，bottom，magin值，注意top和bottom值只要设置相等就可以。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #f5ff9b;
        }
        .block_1{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: palevioletred;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="block_1"></div>
</div>
</body>
</html>

5.使用flex布局：

  方式一：父元素设置display:flex;align-items: center;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width: 200px;
            height: 200px;
            display: flex;
            align-items: center;
            background-color: #f5ff9b;

        }
        .block_1{
            width: 100px;
            height: 100px;
            background-color: palevioletred;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="block_1"></div>
</div>
</body>
</html>

方式二：父元素设置display:flex，设置好之后改变主轴的方向flex-direction: column；justify-content属性定义了项目在主轴上的对  齐方式。

1.flex-direction 属性规定灵活项目的方向。

属性值

值 描述
row主轴为水平方向，起点在左端
row-reverse主轴为水平方向，起点在右端；
column主轴为垂直方向，起点在上沿；
column-reverse主轴为垂直方向，起点在下沿。

 

2.justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

属性值

值 描述
flex-start默认值。项目位于容器的开头。左对齐
flex-end项目位于容器的结尾。右对齐
center项目位于容器的中心。居中
space-between两端对齐，各个项目之间的间隔均相等；
space-around各个项目两侧的间隔相等。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width: 200px;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: #f5ff9b;

        }
        .block_1{
            width: 100px;
            height: 100px;
            background-color: palevioletred;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="block_1"></div>
</div>
</body>
</html>

 

行级元素

1.使用flex布局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block_1{
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            background-color: palevioletred;
        }
    </style>
</head>
<body>
<div class="block_1">
    <span>你好</span>
</div>
</body>
</html>

输出结果：

2.使用line-height

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width: 200px;
            height: 200px;
            line-height: 200px;
            background-color: #f5ff9b;
        }
    </style>
</head>
<body>
<div class="block">
    <span>很高兴认识你</span>
</div>
</body>
</html>

输出结果：

注意：如果line-height取值为百分比时候的描述：基于当前字体尺寸的百分比行间距。这里的百分比并不是相对于父元素尺寸而言，而是相对于字体尺寸来讲的。

垂直居中+水平居中

行级元素：父元素设置display:table;将父元素转化为块级表格来显示

                  子元素设置display:table-cell;vertical-align: middle;text-align: center;将子元素作为一个表格单元格显示


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width: 200px;
            height: 200px;
            background-color: #f5ff9b;
            display: table;
        }
        .block_1{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="block">
    <span class="block_1">你好</span>
</div>
</body>
</html>

注意：vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的<td><th>等等，像<div><span>这样的元素是不能使用的。

块级元素：

一、使用弹性盒

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

 

属性值

值 描述
stretch

默认值。元素被拉伸以适应容器。

如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

center

元素位于容器的中心。

弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

flex-start

元素位于容器的开头。

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end

元素位于容器的结尾。

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

baseline

元素位于容器的基线上。

如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background-color: #f5ff9b;
        }
        .block_1{
            width: 100px;
            height: 100px;
            background-color: palevioletred;
        }

    </style>
</head>
<body>
<div class="block">
    <div class="block_1"></div>
</div>
</body>
</html>

输出结果：

二、利用定位

父元素相对定位，子元素绝对定位


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #f5ff9b;
        }
        .block_1{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            background-color: palevioletred;
            transform:translate(-50%,-50%);
        }

    </style>
</head>
<body>
<div class="block">
    <div class="block_1"></div>
</div>
</body>
</html>

 

 

木易一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页制作中的水平居中和垂直居中解决方法集合
09-25
在定义网页的CSS样式的时候，我们或许并不怎么用到垂直居中。
div框水平垂直居中跟内容垂直居中.html
03-31
div框水平垂直居中跟内容垂直居中
水平居中与垂直居中
weixin_30437481的博客
07-25 92
一、水平居中 1）如果是行内元素，需要在它的父元素上设置text-align: center; 2）如果是块元素，直接设置元素的css属性text-align: center; 或则可以定宽再加上margin:0 auto; p{ width: 300px; margin:0 auto; } p{margin:auto;}...
CSS布局对齐方式--水平居中、垂直居中、水平垂直居中
qq_26780317的博客
07-04 4万+
    前言：在网页布局中，经常遇到需要使元素居中对齐的时候，居中对齐的方式有：水平居中、垂直居中和水平垂直居中。这次，借此回顾总结一下，并在此记录下相关内容。 一、水平居中：     （1）行内元素的水平居中             如果被设置的元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的设置为display:inline-...
CSS基础知识（五）：水平居中和垂直居中
前端
10-28 2904
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
CSS中实现元素水平居中、垂直居中的6个方法（详解）
xtcbql的博客
09-30 2万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
【CSS】元素居中总结-水平居中、垂直居中、水平垂直居中
qq_37219845的博客
02-13 2346
CSS水平、垂直、水平垂直居中总结
css 水平居中，垂直居中，自适应宽度的代码
09-25
宽度自适应：就是元素的宽度根居里面的内容来变化
CSS水平垂直居中解决方案(6种)
09-24
Flexbox布局提供了一种简单的方式来实现水平和垂直居中。设置父元素的`display: flex`，使用`justify-content: center`和`align-items: center`进行居中。 ```css .parent { width: 400px; height: 200px; ...
【CSS】水平居中、垂直居中、水平垂直居中
Dora_5537的博客
05-09 220
总结 1. 水平居中 （1）使用 text-align：把父元素设置为：text-align: center 该方法均适用于行内元素、行内块元素、块级元素。 注意：如果块级元素设置了宽度，则需要把块级元素设置为行内元素或行内块元素：display: inline 或 display: inline-block； （2）使用 margin：把元素设置为：...
CSS水平居中+垂直居中+水平/垂直居中的方法总结
热门推荐
半夏半暖半倾城的博客
09-02 19万+
  目录 水平居中  行内元素  块级元素 方案一：(分宽度定不定两种情况) 方案二：使用定位属性 方案三：使用flexbox布局实现（宽度定不定都可以） 垂直居中 单行的行内元素 多行的行内元素  块级元素 水平垂直居中 已知高度和宽度的元素 未知高度和宽度的元素 方案一：使用定位属性 方案二：使用flex布局实现 水平居中  行内元素 首先看它的父元...
水平居中、垂直居中、水平垂直居中、浮动居中、绝对定位居中.......统统帮你搞定！
前端少年
05-30 4904
2018.05.29 居中一个元素？你会想到啥？这里面的知识还真不少。包括水平居中，垂直居中，还有水平垂直居中。 如果要再要细分，还要分浮动元素、绝对定位的居中。 为了代码简介，没有加背景和其他样式，需要看效果的，可以加上背景。 目录： 第一部分：水平居中 1、常规元素的水平居中 行内元素、不定宽块级元素：text-align 图片的水平居中 ：clear +...
CSS的垂直居中和水平居中总结
菜鸟路上的小白
11-16 744
前言 CSS居中一直是一个比较敏感的话题，为了以后开发的方便，楼主觉得确实需要总结一下了，总的来说，居中问题分为垂直居中和水平居中，实际上水平居中是很简单的，但垂直居中的方式和方法就千奇百怪了。 内联元素居中方案 水平居中设置： 行内元素 设置 text-align:center； Flex布局 设置display:flex;justify-content:c
css元素水平居中和垂直居中的方式
anchii774687的博客
11-03 267
关于居中的问题，一直处于疑惑不解的状态，知道的几种方法好像也不是每一次都会起到作用，所以更加迷惑。主要是不清楚该 在什么情况下采用哪种解决方法，所以，整理了一些方法，梳理一下思路，做一个总结。 1. line-height使单行文本垂直居中 对于单行文本，可以设置它的行高等于它父容器的高度，这样就实现了该文本的垂直居中，但是此方法只适用于单行文本。 （其实严格意义上来说，文字并不是绝对的...
css居中的方式（水平居中+垂直居中+水平垂直居中）
qq_44728587的博客
07-13 923
一.水平居中盒子 1.行内元素水平居中 实现方法：首先要确定父元素是不是块级元素，如果是，则给父元素添加text-align:center；属性，如果不是，则给先给父元素设置display：block；属性再添加text-align:center;属性。 <style> .out{ width: 500px; height: 500px; background-color: blue; text-align: center; }
居中布局：水平居中 + 垂直居中 + 水平垂直居中
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
08-03 1074
布局：5种水平居中 + 3种垂直居中 + 3种水平垂直居中
CSS水平垂直居中的方法总结
qq_41260655的博客
10-14 937
Html中水平居中和垂直居中问题详解 水平居中 行内元素： 父级是不是 块级元素： 垂直居中
css水平居中和垂直居中的区别
最新发布
05-08
在Web开发中，CSS水平居中和垂直居中是两种常用的样式布局方式。 水平居中是指将元素在水平方向上居中对齐，使其与父元素的左右边缘距离相等。可以使用以下CSS属性实现水平居中： ```css .parent { text-align: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值