css上下左右居中得几种方法

1.绝对定位居中

.box1{position:relative;border:1px solid #000000;
/* 自定义高度*/
width:500px; height:500px;
}
.box2{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;border:1px solid #00aef3;width:200px;height:200px;
}

效果图：

图一

注意：当没有指定内容块的具体的高度和宽度时，内容块会填满剩余空间。可以通过 display:table 来使高度由内容来决定，但是浏览器支持不是很好。

2.transform：translate（）；加一半减一半居中

.box{width: 500px;height: 500px;border: 1px solid red;}.box1{position: relative;width: 200px;height: 200px;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);border: 1px solid #222222;}

这里translate的百分比是相对于自身的，所以高度是可变的，效果如图一。但是transform需要进行适配浏览器得支持。

3.跟上面相似，可以自己理解一下子

.box{width: 500px;height: 500px;border: 1px solid red;}.box1{position: relative;width: 200px;height: 200px;left: 50%;top: 50%;margin-top: -100px;margin-left: -100px;border: 1px solid #222222;}

注意：需要知道宽高

4.弹性盒子flex 居中

.box{display: flex;flex-direction: row;justify-content: center;align-items: center;width: 500px;height: 500px;border: 1px solid red;}.box1{width: 200px;height: 200px;border: 1px solid #222222;}

最方便最简单，代码最少得，需要浏览器得支持

css上下左右居中得几种方法相关推荐

CSS上下左右居中的几种方法
1.absolute,margin: auto .container {position: relative; } .content {position: absolute;margin: auto; ...
CSS 实现居中的几种方法
**CSS 实现居中的几种方法** 一.前言二.常见的方法方法一:margin和width实现方法二:inline-block和父元素text-align 方法三:浮动实现水平居中方法四:绝对 ...
css居中的几种办法,CSS div居中的几种方法
CSS实现div垂直居中的方法有很多,下面div居中的几种方法是自己平时写网页中经常用到的,最常见的例子就是登录注册弹出框. 方法一:对div使用绝对布局position:absolute;并设置to ...
CSS元素居中的5种方法分享。
转自:微点阅读 https://www.weidianyuedu.com 经常碰到有人在问,如何让一个元素上下左右都居中呢? 相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参 ...
元素上下左右居中的几种方法
定位居中1 让外层div相对定位(得设置宽高),内层div绝对定位,top.left分别设为50%,然后通过设置margin-top.margin-left值为宽度的负数并且是内层div的一半,就可以 ...
absolute定位css元素居中的两种方法
1(上下左右居中,不能微调) position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 2(上下左右居中,可微调) posit ...
css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
html绝对定位怎么页面居中,css绝对定位如何居中？css绝对定位居中的四种实现方法...
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
CSS元素上下左右居中的几种方式
CSS元素上下左右居中的几种方式假设以以下父子元素实现上下左右居中为例: <div class='father'><div class='son'></div> ...

css上下左右居中得几种方法

css上下左右居中得几种方法相关推荐

最新文章

热门文章