div内元素居中

淩亂°似流年 2022-05-28 05:35 184阅读 0赞

![这里写图片描述][SouthEast]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<title>flex</title>
    		<style>
    			.container{
    				width: 100%;
    				height: 350px;
    				background-color: aqua;
    				display: flex;/*设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效*/
    				display: -webkit-flex; /* Safari */
    				flex-direction: column;/*容器内项目的排列方向(默认横向排列 row)*/
    				flex-wrap: nowrap;/*容器内项目换行方式*/
    				justify-content: center;/*项目在主轴上的对齐方式*/
    				align-items: center;/*项目在交叉轴上如何对齐*/
    				align-content: center;/*定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用*/
    			}
    			.item{
    				width: 80px;
    				height: 50px;
    				margin: 5px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<div class="item" style="background-color: antiquewhite;"></div>
    			<div class="item" style="background-color: burlywood;"></div>
    			<div class="item" style="background-color: cornflowerblue;"></div>
    		</div>
    	</body>
    </html>

[SouthEast]: /images/20220528/c11eeff3a36546fab7f3463d4d35730e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 div中的元素水平居中对齐

![cffe6153b376432baeceac9e1b9650e6.png][]![b53c9cd02ee8454b9f019827e68624f4.png][]

曾经终败给现在/ 2023年10月14日 20:25/ 0 赞/ 40 阅读

相关实现div内img水平垂直居中

1. flex布局父元素 display: flex; justify-content: center; align-items: cente

浅浅的花香味﹌/ 2022年10月07日 03:51/ 0 赞/ 266 阅读

相关 div内元素居中

![这里写图片描述][SouthEast] <!DOCTYPE html> <html> <head> <meta charset="U

淩亂°似流年/ 2022年05月28日 05:35/ 0 赞/ 185 阅读

相关 HTML - 内联元素居中和块级元素居中

text-align：'center' 这是针对内联元素的，而margin：0 auto 则是针对块级元素的居中方式。而且它们的使用对象不一样。我们看一下如下代码：

￡神魔★判官ぃ/ 2022年05月17日 01:04/ 0 赞/ 252 阅读

相关 CSS——div垂直居中及div内文字垂直居中

　　最近做demo时，经常需要div垂直居中或者让div内文字相对div垂直居中。水平居中比较简单，就不多说了，这里主要记录一下垂直居中的一些方法。一、div垂直居中的一些

旧城等待，/ 2021年12月21日 11:29/ 0 赞/ 491 阅读

相关 div块元素垂直水平居中方法总结

1、已知块级元素的宽和高，使用绝对定位+外边距设定水平垂直居中。父元素position:relative，子元素position:absolute;top:50%;le

﹏ヽ暗。殇╰゛Y/ 2021年12月16日 12:39/ 0 赞/ 372 阅读

相关设置div 居中和得到dom元素高度

javascript中获取dom元素高度和宽度的方法如下：网页可见区域宽： document.body.clientWidth 网页可见区域高： document.bo

小咪咪/ 2021年11月02日 08:02/ 0 赞/ 358 阅读

相关让行内元素（如图片）在div中水平垂直居中（干货）

（1）第一种：用vertical-align <div class="method1"> <span class="tiptop"></span>

忘是亡心i/ 2021年09月15日 18:58/ 0 赞/ 285 阅读

相关 div内图片和文字水平垂直居中

大小不固定的图片、多行文字的水平垂直居中本文综述想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度

忘是亡心i/ 2021年09月14日 10:44/ 0 赞/ 420 阅读

相关让行内元素（如图片）在div中水平垂直居中（干货）

（1）第一种：用`vertical-align` <div class="method1"> <span class="tiptop"></span>

￡神魔★判官ぃ/ 2021年06月26日 16:06/ 0 赞/ 350 阅读