css元素居中的几种方式

1、水平居中

<div style="width:200px;margin:0 auto;background-color: yellow;">水平居中</div>

2、绝对定位水平垂直居中

<div style="position: absolute;width: 500px;height: 300px;margin: auto;top: 0;left: 0;bottom: 0;right: 0;background-color: green;">水平垂直居中</div>

3、水平垂直居中一

<div style="position: relative;width:400px;height:200px;top: 50%;left: 50%;margin: -100px 0 0 -200px;background-color: red;">水平垂直居中</div>

4、水平垂直居中二

<div style="position: absolute;width:300px;height:200px;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: blue;">水平垂直居中</div>

5、flex 布局居中

<div style="display: flex;align-items: center;justify-content: center;"><div style="width: 100px;height: 100px;background-color: gray;">flex 布局</div>
</div>

转载于:https://www.cnblogs.com/fengyuexuan/p/11243874.html

css元素居中的几种方式相关推荐

CSS元素居中的5种方法分享。
转自:微点阅读 https://www.weidianyuedu.com 经常碰到有人在问,如何让一个元素上下左右都居中呢? 相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参 ...
css文本居中的几种方式
为什么80%的码农都做不了架构师?>>> 行内元素还是块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素一.左右居中 1.行内元素: 常用的inline元素有 ...
css 实现居中的五种方式
一 .文字居中 1 固定容器高度的单行文本垂直居中:height=line-height 2 未知容器高度的文本垂直居中:设定padding,使上下的padding值相同即可 ...
absolute定位css元素居中的两种方法
1(上下左右居中,不能微调) position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 2(上下左右居中,可微调) posit ...
CSS元素上下左右居中的几种方式
CSS元素上下左右居中的几种方式假设以以下父子元素实现上下左右居中为例: <div class='father'><div class='son'></div> ...
css元素居中方法归纳
水平和垂直方向都可居中统一HTML代码: <div class="outer"><div class="inner"></div ...
图文对齐居中的几种方式
总结图文居中的几种方式 1.方法一 css #target{ width: 150px; border:1px purple solid; line-height: 40px; text-indent ...
css元素居中实现方法
关于css元素居中,查阅资料和实验有以下几种方法: 水平居中 1.最简单的在父元素中加入 text-align:center .这条语句不用关心子元素是否有固定的尺寸大小. 但只能对图片,按钮,文字等 ...
关于css垂直水平居中的几种方式
关于css垂直水平居中的几种方式 css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简 ...
css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...

css元素居中的几种方式

css元素居中的几种方式相关推荐

最新文章

热门文章