CSS绝对居中（5种方案）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS绝对居中</title><!-- CSS绝对居中解决方案一、定宽高：1.绝对定位+负margin值2.绝对定位+margin auto二、不定宽高：1.绝对定位+transform2.table-cell3.flex --><style>.box-wrapper{width: 300px;height: 300px;border: 1px solid #000;position: relative;}/* 第一种：定宽高-绝对定位+负margin值 */.box-absolute-margin{width: 200px;height: 200px;background-color: mediumblue;/* 关键因素 */position: absolute;left: 50%;top: 50%;margin-left: -100px; /*margin-left/top负值根据width和height来决定，取值为一半;*/margin-top: -100px;}/* 第二种：定宽高-绝对定位+margin auto */.box-absolute-margin-auto{width: 200px;height: 200px;background-color: mediumblue;/* 关键因素 */position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}/* 第三种：不定宽高-绝对定位+transform */.box-absolute-transform{background-color: yellow;/* 关键因素 */position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); /*向x,y移动： 移动距离为自身盒子宽高的50%*/}/* 第四种：不定宽高-table-cell */.box-wrapper-table-cell{display: table-cell;vertical-align: middle;text-align: center;}.box-table-cell{background-color: yellowgreen;display: inline-block;}/* 第五种：不定宽高-flex */.box-wrapper-flex{display: flex;justify-content: center;align-items: center;}.box-flex{background-color: tomato;}</style>
</head>
<body><!-- 第一种：定宽高-绝对定位+负margin值 --><div class="box-wrapper"><div class="box-absolute-margin"></div></div><br><!-- 第二种：定宽高-绝对定位+margin auto --><div class="box-wrapper"><div class="box-absolute-margin-auto"></div></div><br><!-- 第三种：不定宽高-绝对定位+transform --><div class="box-wrapper"><div class="box-absolute-transform">的撒的吾问无为谓无若多</div></div><br><!-- 第四种：不定宽高-table-cell --><div class="box-wrapper box-wrapper-table-cell"><div class="box-table-cell">少时诵诗书所大付错</div></div><br><!-- 第五种：不定宽高-flex --><div class="box-wrapper box-wrapper-flex"><div class="box-flex">flex的点点滴滴多多多多多多多    </div></div><br></body>
</html>

CSS绝对居中（5种方案）相关推荐

html盒子居中的方式,CSS盒子居中三种方法
前言 CSS盒子居中,我觉得是很有必要学习一下的.特别是第三种方法,奇淫技巧升级版,也是生产环境中非常常见的一种方法,不需要知道宽度,随着祖先元素的变化而变化! 1.常规方法常规方法只需要给盒子设置 ...
vertical-align middle 不生效的几种解决方式，图片居中几种方案
1.在父元素中增加display:table-cell,vertical-align 写在在父元素中 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .btn{ ...
css 上下左右居中5种方法
不定位2种 <div class="div1"><div class="div2"></div></div> . ...
html 链接长宽,CSS实现长宽比的几种方案【转载】
对于在CSS中实现容器的长宽比最初的创意是来自于在Web中如何实现纵横比.主要是用于响应式设计中的iframe.img和video之类的元素.随之扩展为适用于任何的容器长宽比.那在CSS中到底有多少种 ...
html设置长宽高代码_CSS实现长宽比的几种方案
在上一篇文章中总结了CSS如何实现容器长宽比几种方法.对于在CSS中实现容器的长宽比最初的创意是来自于在Web中如何实现纵横比.主要是用于响应式设计中的iframe.img和video之类的元素.随之 ...
CSS 实现居中的几种方法
**CSS 实现居中的几种方法** 一.前言二.常见的方法方法一:margin和width实现方法二:inline-block和父元素text-align 方法三:浮动实现水平居中方法四:绝对 ...
css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
CSS实现长宽比的几种方案,CSS如何实现长宽比？
本文和大家分享的主要是css中实现长宽比的几种方法,一起来看看吧,希望对大家学习css有所帮助. 长宽比故事长宽比在影视制作中又被称之为宽高比,指的是一个视频的宽度除以它的高度所得到的比例,通常表示 ...
html网页自动兼容模式,解决CSS浏览器兼容性问题的4种方案
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了,更让人头疼的是,还要面临各种适配.兼容性问题. 为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了! Chrome,Frire ...

CSS绝对居中（5种方案）

CSS绝对居中（5种方案）相关推荐

最新文章

热门文章