div+css实现水平居中、垂直居中和水平垂直居中

最新推荐文章于 2023-07-19 11:04:42 发布
最新推荐文章于 2023-07-19 11:04:42 发布
阅读量555 收藏 2
点赞数 2
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44427407/article/details/112969139
版权
本文详细介绍了如何使用div+css布局实现元素的水平居中、垂直居中以及水平垂直居中。内容包括块级元素、行级元素、行内块级元素的特性，并提供了各种居中方法的示例，如text-align、margin：0 auto、transform、flex布局、grid布局等。此外，还分享了解决Typro笔记丢失的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

盒子模型布局（div+css）

本次记录html里元素布局的实现，即使用css实现元素的水平居中、垂直居中、水平垂直居中。

在此之前先记录一下，块级元素、行级（内联）元素、内联块元素这三个概念。接下来就依次作简单介绍。

1.块级元素（display:block）

其特性有：

  • 元素独占一行，其自己另起一行开始，并且其后元素也另一起一行开始。
  • 元素高度（height）、宽度（width）、行高（line-height）、内边距（padding）、外边距（margin）均可设置。
  • 元素占据其父元素的整个容器，也就是说块级元素的宽度和父元素的宽度是一样的，其占满了父元素，所以其后元素只能另起一行。
  • 可以容纳内联元素以及其他块级元素。

块级元素主要有：

<address></address> , <blockquote></blockquote> ，<center></center> , <dir></dir> , <div></div> , <dl></dl> , <fieldset></fieldset> , <form></form> , <h1></h1> , <h2></h2> , <h3></h3> , <h4></h4> , <h5></h5> , <h6></h6> , <hr> , <isindex></isindex> , <menu></menu> , <noframes></noframes> , <noscript></noscript> , <ol></ol> , <p></p> , <pre></pre> , <table></table> , <ul></ul> , <li></li>

demo演示：

 <!--
	div为块级元素，默认display:block，
	设置父级元素宽高，块级元素子元素会继承其父元素的宽度，所以两个子元素都是新起一行开始。
 -->
<div style="width: 100px;height: 100px;background-color: #fff;">  
    <div style="height:50px;background-color: blue;"></div>
    <address style="height:60px;background-color: red;"></address>
</div>

2.行级（内联）元素（display:inline）

其特性有：

  • 和其他同级行级元素排列在同一行。
  • 元素高度（height）、宽度（width）、垂直方向的内边距（padding-top/padding-bottom）、外边距（margin-top/margin-bottom）不可设置。但可以设置行高（line-height）、水平方向外边距（margin-left/margin-right）以及内边距（padding）
  • 行级元素只能容纳文本或者其他行级元素，行级元素的宽度取决于其内容的宽度，其内容一般是文本或者图像。

行级元素主要有：

<a></a> , <abbr></abbr> , <acronym></acronym> , <b></b> , <bdo></bdo> , <big></big> , <br> , <cite></cite> , <code></code> , <dfn></dfn> , <em></em> , <font></font> , <i></i> , <img> , <input> , <kbd></kbd> , <label></label> , <q></q> , <s></s> , <samp></samp> , <select></select> , <small></small> , <span></span> , <strike></strike> , <strong></strong> , <sub></sub> , <sup></sup> ,<textarea></textarea> , <tt></tt> , <u></u> , <var></var>

demo演示：

<!--
	块级元素div可以容纳行级元素，该demo容纳了a、q、sup三个行级元素
	a标签测试结果发现行级元素里padding可以改变
	q标签测试发现行级元素里宽度取决于内容的宽度，设置无法改变
	sup标签测试发现行级元素水平方向的margin是可以改变的
-->
<div style="width: 800px;height: 100px;margin: 20px 0;">
    <a style="padding: 10px 10px;">内联元素a标签</a>
    <q style="width:100px">内联元素q标签测试宽度能否改变</q>
    <sup style="margin-left:10px;margin-right:10px ;">内联元素sup标签测试能否改变水平方向的内外边距</sup>
</div>

3.行内块级元素（display:inline-block）

其特性有：

  • 和其他元素排列在一行上，无论其为块级元素还是行级元素，设置其展示方式为inline-block都会被排列在一行内。

  • 元素高度（height）、宽度（width）、行高（line-height）、内边距（padding）、外边距（margin）均可设置。

行内块级元素主要有：

<img> , <inpput>

demo演示：

<!--
	img标签行测试行内块级元素可以设置其内外边距
	input标签测试行内块级元素可以设置其宽高
-->
<img src="./img/logo.png" alt="JingDong icon" style="margin: 10px auto;padding: auto 10px;">
<input type="text" style="width: 200px; height: 20px;">

4.水平居中

水平居中也分为两种，行内元素水平居中和块级元素水平居中

  • 行内元素居中：在父元素css中添加text-align:center即可

    demo演示：

    <!--
	父元素标签为div，设置其样式为text-align:center子元素水平居中
	子元素为行级元素、也可以是行内块级元素
-->
<div style="text-align: center;">
    <a>行内元素1</a>
    <q>行内元素2</q>
    <sup>行内元素3</sup>
    <img src="./img/logo.png" alt="JingDong icon">
</div>

  • 块级元素居中

    • 定宽

      • 正常流布局–未设置定位（position）:子元素宽度已知，设置其外边距margin：0 auto即可

        demo演示：

        <!--
子元素宽度确定，且为正常流布局，直接设置其margin:0 auto即可实现水平居中
p:first-child 代表选择所有父元素底下第一个子元素标签为p的元素
p:first-child~p 代表选择除第一个子元素为p标签的元素外的其他所有同级p标签元素
-->
<style type="text/css">
  #parent p {
      width: 100px;
      margin: 0 auto;
  }

  p:first-child {
      background-color: red;
  }

  p:first-child~p {
      background-color: blue;
  }
</style>

<div id="parent">
  <p id="child-first">子元素正常流定宽1</p>
  <p id="child-second">子元素正常流定宽2</p>
  <p id="child-second">子元素正常流定宽3</p>
</div>

      • 非正常流布局–子元素设置绝对定位脱离文档:需要确定其四方定位

        demo演示:

        <!--
	父元素设置相对定位,子元素设置决定定位.
	子元素在设置magrin:0 auto的同时还需要设置元素的定位,确保实现水平居中
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
        position: relative;
    }

    #parent p {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        background-color: red;
    }
</style>

<div id="parent">
    <p>子元素非正常流定宽1</p>
</div>

    • 不定宽

      • 使用transform

        demo演示：

        <!--
	子元素绝对定位距离父元素左端50%处，然后再以x轴向左平移子元素大小的50%
	即实现水平居中
-->
<style type="text/css">
    #parent {
        position: relative;
    }

    #parent p {
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        background-color: red;
    }
</style> 
<div id="parent">
    <p>子元素正常流定宽1</p>
</div>

      • 借助table

        demo演示：

        <!--
	
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
    }
    #parent table {
        margin: 0 auto;
    }
</style>
<div id="parent">
    <table>
        <tbody>
            <tr>
                <td>
                    <p>子元素非正常流定宽1</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

参考css之元素居中

5.垂直居中

定宽就不详述了，讲讲不定宽的情况。

  • 使用绝对定位和transform

    demo演示：

    <!--
	子元素绝对定位距离父元素顶端50%处，然后再以y轴向上平移子元素大小的50%
	即实现垂直居中
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
        position: relative;
    }

    #parent p {
        top: 50%;
        position: absolute;
        transform: translateY(-50%);
        background-color: red;
    }
</style>
<div id="parent">
    <p>子元素非正常流定宽1</p>
</div>

  • 使用绝对定位和负外边距

    demo演示：

    <!--
	子元素绝对定位距离父元素顶端50%处，然后再设置其上外边距为子元素高度的一半，手动实现平移
	最后实现垂直居中
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
        position: relative;
    }

    #parent p {
        width: 50%;
        height: 30%;
        top: 50%;
        position: absolute;
        margin: -15% 0 0 0; 
        background-color: red;
    }
</style> 
<div id="parent">
    <p>子元素非正常流定宽1</p>
</div>

  • 使用flex布局

    demo演示：

    <!--
   元素通过设置 display:flex; 将其指定为 flex 布局的容器，指定好了容器之后再为其添加 align-items 属性，	该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式。
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
        display: flex;
        align-items: center;
    }

    #parent p {
        background-color: red;
    }
</style> 
<div id="parent">
    <p>子元素非正常流定宽1</p>
</div>

  • 使用flex布局（第二种）

    demo演示：

    <!--
   首先给父元素设置 display:flex; 设置好之后改变主轴的方向 flex-direction: column;意思是布局主轴方向为垂直方向，起点在顶端
	随后设置justify-content：center，代表着项目在主轴上的对齐方式为居中对齐
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #parent p {
        background-color: red;
    }
</style> 
<div id="parent">
    <p>子元素非正常流定宽1</p>
</div>

  • 一些特殊简便的垂直居中方式

    demo演示：

    <!--
   设置line-height高度与父元素高度相同可实现单行文本元素垂直居中
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
    }

    #parent p {
        line-height: 400px;
        background-color: red;
    }
</style> 
<div id="parent">
    <p>子元素非正常流定宽1</p>
</div>

  • 使用 line-height 和 vertical-align 对图片进行垂直居中

    demo演示：

    <!--
	父元素设置line-height与其高度相同，子元素再设置vertical-align: middle实现图片垂直居中
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
        line-height: 400px;
    }

    #parent img {
        vertical-align: middle;
    }
</style> 
<div id="parent">
    <img src="./img/logo.png" alt="JingDong icon">
</div>

参考css垂直居中

6.水平垂直居中

  • 使用flex

    demo演示：

    <!--
	父元素使用flex布局，然后设定align-items: center;使其子元素水平居中，再定义justify-content: center;使其垂直居中，最后实现水平垂直居中。
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
        background-color: yellow;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #child {
        background-color: red;
    }
</style> 
<div id="parent">
    <div id="child">水平垂直居中测试</div>
</div>

<!--
	父元素使用flex布局，然后设定子元素nargin:auto，最后实现水平垂直居中。
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
        background-color: yellow;
        display: flex;
    }

    #child {
        background-color: red;
        margin: auto;
    }
</style> 
<div id="parent">
    <div id="child">水平垂直居中测试</div>
</div>

  • 使用grid

    demo演示：

    <!--
	与flex布局类似
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
        background-color: yellow;
        display: grid;
    }

    #child {
        background-color: red;
        align-self: center;
        justify-self: center;
    }
</style> 
<div id="parent">
    <div id="child">水平垂直居中测试</div>
</div>

<!--
	与flex布局类似
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
        background-color: yellow;
        display: grid;
    }

    #child {
        background-color: red;
        margin:auto;
    }
</style> 
<div id="parent">
    <div id="child">水平垂直居中测试</div>
</div>

  • 使用absolute+transform

    demo演示：

    <!--
	于上述方法里结合水平居中与垂直居中，实现水平垂直居中
-->
<style type="text/css">
    #parent {
        width: 400px;
        height: 400px;
        background-color: yellow;
        position: relative;
    }

    #child {
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<div id="parent">
    <div id="child">水平垂直居中测试</div>
</div>

参考css水平垂直居中

7.遇到问题

出了点意外情况，用Typro做笔记，结果没有保存却退出了。解决办法见typro文件未保存找回。

简单记录一下，div+css居中问题，面试经常问。

闪白
关注
Leetcode每日打卡：77. 组合(Python实现）
.
09-09 3251
题目的内容如下 解答：这道题目一看就是入门级搜索题，十分简单，DFS一遍即可。 DFS本来就是一个对栈的操作，也就是说你任意一个DFS理论上都是可以用栈来实现，只不过是代码的复杂程度不用罢了，以下代码也可以改写成完全用栈来实现的，有兴趣的同学可以去试试，应该也是不复杂的。本文为了简单起见，用了个递归+栈。 代码如下，有问题欢迎留言。 class Solution: def dfs(self,pos,k,n): # 参数解释：pos为当前遍历到的位置,k是还需要选择k个,n是
div+css垂直居中和水平居中
03-16
结合以上方法，可以同时实现水平和垂直居中： ```css .container { display: flex; justify-content: center; align-items: center; } ``` 或者使用CSS Grid： ```css .container { display: grid; ...
LeetCode 77. 组合 | Python
"大梦三千秋的博客
09-08 728
使用数学组合数的思路，解决 LeetCode 《77. 组合》问题
css三大元素
gxgalaxy
08-09 440
1.行级元素 内联元素   inline      feature:内容决定元素所在位置 不可通过css改变宽高      example: span  strong   em  a   del 2.块级元素   block      feature：独占一行  可以通过css改变宽高      example: div  p  ul   li  ol  form   addre...
Leetcode题库77. 组合(python实现)
dc12499574的博客
04-29 2405
文章目录思路效果代码 思路 效果 测试又抽风了，右下角测试用例和它内部测试结果居然不一样 代码 ret=[] def func(nums,l,k,array): if len(array)==k: #原写法：ret.append(array) #在主函数中直接返回ret即可，而不是像我那样再次将ret切分 #但是这么写之后，ret并拿不到array数组，可能是局部空间的原因(用完即收) for
【Leetcode刷题Python】77. 组合
BetterBench的博客
08-02 811
给定两个整数 n 和 k，返回范围 [1, n] 中所有可能的 k 个数的组合。你可以按 任何顺序 返回答案。示例 1：输入：n = 4, k = 2输出：[[2,4],[3,4],[2,3],[1,2],[1,3],[1,4],]示例 2：输入：n = 1, k = 1输出：[[1]]
DIV+CSS 全屏垂直居中的一个办法
09-25
` 来实现内容在水平和垂直方向上的居中。`.content` 是需要居中的子元素，其尺寸在这里是固定的。 然而，正如描述中指出的，这种方法的一个缺点是需要预设元素的尺寸。当内容动态变化或需要适应不同设备时，这种...
DIV+CSS水平垂直居中
12-07
使用DIV+CSS实现水平垂直居中的优点是可以使网页布局更加灵活和灵活，可以根据需要随时调整DIV元素的位置和大小。此外，使用CSS样式还可以使网页更加美观和简洁。 四、DIV+CSS水平垂直居中的应用场景 DIV+CSS水平...
使用css实现div垂直居中的示例
09-25
然而，这仅仅是水平和垂直方向上的起点居中，为了真正实现元素自身的居中，我们需要通过负边距(`margin-left`和`margin-top`)来调整元素的位置。负边距的值等于元素自身宽度或高度的一半，即`margin-left:-200px`和`...
CSS三大类元素
HuiDT
09-01 617
文章目录 1.行级元素（inline/内联） feature: 内容决定元素所占位置 不可通过CSS改变宽高 <span></span> <strong></strong> <a href=""&g...
LeetCode 77. 组合（C++、python）
qq_27060423的博客
12-19 297
给定两个整数n和k，返回 1 ...n中所有可能的k个数的组合。 示例: 输入:n = 4, k = 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] C++ class Solution { public: void DFS(vector<vector<int>&g...
JQuery jquery对象数组中取单个对象( .eq() )
houyanhua1的专栏
12-18 9433
$(this).parent().prevAll().eq(2);   // .eq(2) 通过下标找jquery对象。preAll往前找所有元素对象，越靠前下标越大。 .eq(0) 表示紧邻的前一个同级元素对象。
css 3个元素行排列，前2个元素靠左，第三个元素靠右
最新发布
LlanyW的专栏
07-19 814
然后让第三个元素自动占满剩余的空间：flex-grow:1，text-align:end。行排列，默认靠左对齐，
77. 组合(Python)
JulyLi2019的博客
09-08 318
给定两个整数 n 和 k，返回 1 … n 中所有可能的 k 个数的组合。 示例: 输入: n = 4, k = 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 题目就是要求我们从1到n找长度为k的组合数，所以回溯的终止条件就有了。 class Solution: def combine(self, n: int, k: int) -> list: ans = list() def backtrack(t
CSS中的三大标签元素
ifuboy
09-20 502
块状元素 &amp;lt;div&amp;gt;、&amp;lt;p&amp;gt;、&amp;lt;h1&amp;gt;...&amp;lt;h6&amp;gt;、&amp;lt;ol&amp;gt;、&amp;lt;ul&amp;gt;、&amp;lt;dl&amp;gt;、&amp;lt;table&amp;gt;、&amp;lt;address&amp;g
python组合(leetcode)
浮云
11-25 581
给定两个整数n 和 k,返回范围[1,n] 中所有可能的k个数的组合。你可以按任何顺序返回答案。 回溯 代码如下： class Solution: def combine(self, n: int, k: int): path, result = [], [] def backtrack(start, n, k, path): if len(path) == k: result.append(path[:.
回溯-LeetCode77. 组合（Python）
IOT_victor的博客
09-08 505
1、题目描述 https://leetcode-cn.com/problems/combinations/ 给定两个整数n和k，返回 1 ...n中所有可能的k个数的组合。 输入: n = 4, k = 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 回溯 回溯-39. 组合总和https://blog.youkuaiyun.com/IOT_victor/article/details/107646185 77...
LeetCode-Python-77. 组合
Keep Coding
03-19 1632
给定两个整数n和k，返回 1 ...n中所有可能的k个数的组合。 示例: 输入:n = 4, k = 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 第一种思路： 调库。 class Solution(object): def combine(self, n, k): ...
LeetCode 之组合总和系列（Combination Sum）
DoubleFJ の Blog
11-14 1303
个人博客：DoubleFJ の Blog LeetCode 中有多道组合总和（Combination Sum）的题，这些题目都是比较经典的，面试很可能会问到。我这一想，还真是。今天就来简单总结下这一系列题目，总结很重要，还要时而回顾！ Combination Sum I 第一道题的描述如下： 给定一个无重复元素的数组 candidates 和一个目标数 target ，找出 candidate...
DIV+CSS实现绝对定位水平垂直居中与实例解析
在网页设计中，"DIV+CSS水平垂直居中"是一个常见的布局技巧，它利用HTML的`<div>`元素和CSS样式来实现元素在页面上的精准定位。水平居中通常通过设置`position`属性为`absolute`，然后利用`left`和`right`或`margin-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值