css 实现居中对齐的几种方式
如何居中 div?
1. 水平居中:给 div 设置一个宽度,然后添加 margin:0auto 属性
div {width: 200px;
margin: 0auto;
}
2. 水平居中,利用 text-align:center 实现
.container {background: rgba(0, 0, 0, 0.5);text-align: center;font-size: 0;
}
.box {display: inline-block;width: 500px;height: 400px;background-color: pink;
}
3. 让绝对定位的 div 居中
div {position: absolute;width: 300px;height: 300px;margin: auto;top: 0;left: 0;bottom: 0;right: 0;background-color: pink; /*方便看效果*/
}
如何实现div水平垂直居中
水平垂直居中一
确定容器的宽高宽 500 高 300 的层设置层的外边距
div{position:absolute; /*绝对定位 */width:500px;height:300px;top:50%;left:50%;margin:-150px 00 -250px; /*外边距为自身宽高的一半*/background-color:pink; /*方便看效果*/}
-水平垂直居中二
/*未知容器的宽高,利用transform
属性
div {position: absolute; /*相对定位或绝对定位均可*/width: 500px;height: 300px;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: pink; /*方便看效果*/
}
-水平垂直居中三
/利用 flex 布局实际使用时应考虑兼容性/
.container {display: flex;align-items: center; /*垂直居中*/justify-content: center; /*水平居中*/
}
.containerdiv {width: 100px;height: 100px;background-color: pink; /*方便看效果*/
}
-水平垂直居中四
/利用 text-align:center 和 vertical-align:middle 属性/
.container {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, 0.5);text-align: center;font-size: 0;white-space: nowrap;overflow: auto;}
.container::after {content: "";display: inline-block;height: 100%;vertical-align: middle;
}
.box {display: inline-block;width: 500px;height: 400px;background-color: pink;white-space: normal;vertical-align: middle;
}
总结:
一般常见的几种居中的方法有:
对于宽高固定的元素
- 我们可以利用 margin:0auto 来实现元素的水平居中。
- 利用绝对定位,设置四个方向的值都为 0,并将 margin 设置为 auto,由于宽高固定,
因此对应方向实现平分,可以实现水平和垂直方向上的居中。 - 利用绝对定位,先将元素的左上角通过 top:50%和 left:50%定位到页面的中心,然后再 通过 margin负值来调整元素的中心点到页面的中心。
- 利用绝对定位,先将元素的左上角通过 top:50%和 left:50%定位到页面的中心,然后再 通过 translate 来调整元素的中心点到页面的中心。
- 使用 flex 布局,通过 align-items:center 和 justify-content:center 设置容器的垂直和水平
方向上为居中对齐,然后它的子元素也可以实现垂直和水平的居中。
对于宽高不定的元素,上面的后面两种方法,可以实现元素的垂直和水平的居中。
css 实现居中对齐的几种方式相关推荐
- CSS文字居中显示的几种方式
1.利用line-height和vertical-align html <div class="box"><span>测试文字</span> & ...
- css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式 一.使用grid布局 二.使用flex布局 三.使用定位+外边距 四.使用定位+平移 五.使用外边距 + 平移 六.使用文本对齐 + 行高 七.使用表格单元 一.使用 ...
- 【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式 简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
- html多重边框,中间空白,【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式 简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
- CSS样式表引入的三种方式,及优先级顺序
CSS样式表引入的三种方式,及优先级顺序 CSS可以通过三种方式引入样式表,三种方式分别是行内样式表,内部样式表和外部样式表. 行内样式表 通过给标签设定style属性 <body>< ...
- 如何将横向滚动条加粗css,css实现横向滚动条的两种方式(代码实例)
本章给大家介绍用css实现横向滚动条的两种方式.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. html代码: 全部 Adobe 微软 会计 绘画 Adobe 微软 会计 绘画 一. ...
- 自动居中对齐 html,css如何居中对齐?
在我们开发前端页面的时候,为了让页面效果美观,会出现需要居中效果的地方.下面本篇文章就来给大家介绍一下使用CSS设置居中对齐的方法,希望对大家有所帮助. 1.text-align:center -- ...
- css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
- css+分散,【原】css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
最新文章
- riot.js教程【四】Mixins、HTML内嵌表达式
- python网课阿里云_关于python视频教程的阿里云网站内容
- java函数ao活动对象_Java程序设计10-11试卷A0105答案
- 从零开始攻略PHP(8)——面向对象(下)
- HTTP之Cache-Control基本概念以及实例(C++ Qt实现)
- 程序员面向软件开发时,如何成功?
- MATLAB R2021b for Mac 版 支持M1 MacOS12,超级详细步骤。(内附安装包网盘链接)
- 联通BSS-ESS-CBSS系统安装相关
- 再探c++ priority
- Hej Stylus for Mac(手写笔画图工具)
- 【MongoDB】继续在简单操作的边缘试探D2
- 好家伙!上天入地混血儿料箱机器人
- 7人制足球技战术要点
- 面试必备:《Java 最常见 200+ 面试题全面解析》
- Linux——用户的特殊shell与PAM模块
- send 命令 linux,linux的send命令
- Matplotlib图形配置
- Spring Boot 工程启动报错“org.springframework.context.ApplicationContextException: Unable to start ...“解决方案
- 高性能计算机储存部件硬盘,为啥电脑换了固态硬盘会变快 它比机械盘强在哪?...
- 一个事件订阅和发布的库(onfire.js)的源码浅析