css实现元素居中的常见方法

1、通过 margin 属性调整 :

{
position: absolute;
top: 50%;
left: 50%;
margin-left: 盒子的一半；
margin-top: 盒子的一半;
}

2、通过 transform 属性调整:

{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-盒子的一半) translateY(-盒子的一半)；
}

3、通过绝对定位：注意子绝父相（子元素绝对定位，父元素相对定位）

{
position: absolute;
top: 0;
left: 0;
right: 0;
bootom: 0;
margin: auto;
}

4、通过弹性盒子：

/* 父盒子 */
{
display: flex;
justify-content: center;
align-items: center;
}

转载于:https://www.cnblogs.com/zhuyan0000/p/10826273.html

css实现元素居中的常见方法相关推荐

10 个CSS实现元素居中的方法汇总
英文 | https://javascript.plainenglish.io/10-css-tricks-you-should-know-for-centering-elements-61092d3 ...
CSS实现元素居中原理解析
原文:CSS实现元素居中原理解析在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简 ...
【CSS】元素居中总结-水平居中、垂直居中、水平垂直居中
[CSS]元素居中一. 水平居中 1.行内元素水平居中 (1)text-align 2.块级元素水平居中 2.1 margin (1)margin 2.2布局 (1)flex+ justify-co ...
css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方.二:position:absol ...
css 伪元素居中对齐
css 伪元素居中对齐 .demo {display: flex;padding: 40px;}.demo::after {content: '';display: inline-block;back ...
CSS初始化的两种常见方法
CSS初始化的两种常见方法两种CSS初始化的常见方案,都是通用类的 CSS reset Eric Meyer写的 CSS reset,源码不是很长: /* http://meyerweb.com/e ...
css隐藏元素触发点击事件,css隐藏元素的几种方法中可以触发点击事件的是？...
css隐藏元素的几种方法中可以触发点击事件的是是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...
前端html隐藏元素方式,CSS 隐藏元素的八种方法
前言总括: 本文详细讲述了在网页中用CSS隐藏元素的七种方法. 念念不忘,必有回响;有一口气,点一盏灯. 正文说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了.博主总结了几种 ...
html 隐藏元素点击事件,css隐藏元素的几种方法中可以触发点击事件的是？
css隐藏元素的几种方法中可以触发点击事件的是是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...

css实现元素居中的常见方法

css实现元素居中的常见方法相关推荐

最新文章

热门文章