CSS上下左右居中对齐
上下左右居中对齐
display: inline/inline-block
将父元素（容器）设定 text-align: center； 即可左右置中。
display: block
将元素本身的 margin-left 和 margin-right 设定为auto; 即可左右置中。
方法一：Position: Absolute 对齐元素本身
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上下左右居中对齐</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
border: 2px solid #0000FF;
} #box {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
/* 或者这样写 */
right: 50%;
bottom: 50%;
transform: translateX(50%) translateY(50%);
} </style>
</head>
<body>
<div id="box"></div>
</body>
</html>
方法二：Flexbox 对齐元素内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上下左右居中对齐</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
border: 2px solid #0000FF;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
方法三：Display : Table 对齐元素内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上下左右居中对齐</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
border: 2px solid #0000FF;
display: inline-block;
}
body {
display: table;
width: 100%;
min-height: 100vh;
margin: 0;
} .cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="cell">
<div id="box"></div>
</div>
</body>
</html>
CSS上下左右居中对齐的更多相关文章
- CSS 图像居中对齐
CSS 图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...
- 利用CSS实现居中对齐
1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: <div class="parentDiv"> 这里随 ...
- CSS上下左右居中的几种方法
1.absolute,margin: auto .container { position: relative; } .content { position: absolute; margin: au ...
- css上下左右居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS居中对齐
CSS实现居中对齐的几种方式 页面布局中,居中对齐是我们经常遇到的场景,现在总结几个常用的方式供大家参考. 场景一:按钮文字居中对齐,line-height + text-align html代码: ...
- 只用CSS实现容器内图片上下左右居中
一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...
- css布局之块上下左右居中
以下方案的通用代码: HTML code: <div class="box"> <div class="content"> <!- ...
- css：子元素div 上下左右居中方法总结
最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
随机推荐
- 第33篇-方法调用指令之invokeinterface
invokevirtual字节码指令的模板定义如下: def(Bytecodes::_invokeinterface , ubcp|disp|clvm|____, vtos, vtos, invoke ...
- HTML+CSS基础(HTML篇)
引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完不成一些功能的,本篇开始学习HTML,文章的主要内容是总结了慕课网中,HTML+CSS ...
- Win10下C语言转8086汇编
目录 Win10下C语言转8086汇编 简介 开始 写C代码 转换成汇编代码 Win10下C语言转8086汇编 简介 最近学习<王爽汇编>,然后突发奇想,想一边写C语言用编译器将其翻译成汇 ...
- kubernetes创建用户
创建k8s User Account 使用openssl方法创建普通用户 准备工作 1 2 3 4 mkdir /root/pki/ 将k8s ca.pem ca-key.pem 证书拷贝到此目录 ...
- 'pybot' 不是内部或外部命令，也不是可运行的程序 或批处理文件
在dos下运行pybot --version提示不是内部命令 这是pip list 打印信息: 解决方法: 在python/Scripts目录下加一个pybot.bat 文件 内容为: @Echo o ...
- vscode输出窗口中文乱码
解决方法:开始->设置->时间和语言->其他日期.时间和区域设置->区域.更改位置->管理.更改系统区域设置->勾选->重启 完美解决!来源:https:// ...
- java eclipse调试提示Source not found 或 一闪而过 解决方法
Web工程Eclipse debug方式启动,在断点的位置被成功拦截,但是没有跳转到工程的代码处,提示如下: 当然这个时候如果我继续按F5的话呢,程序又会接着正常运行了.到这里那就是说程序本身是没有 ...
- Springboot 加载配置文件源码分析
Springboot 加载配置文件源码分析 本文的分析是基于springboot 2.2.0.RELEASE. 本篇文章的相关源码位置:https://github.com/wbo112/blogde ...
- [hdu7078]Pty with card
显然问题被分为两部分,先考虑如何求$F(n)$-- 令第一次所选的人编号为1,其之后所有人按顺时针依次编号为$2,3,...,n$,那么用一个序列来描述状态,其中第$i$个元素为当前存在的人中编号第$ ...
- [cf1515G]Phoenix and Odometers
显然这条路径只能在$v_{i}$所在的强连通分量内部,不妨仅考虑这个强连通分量 对这个强连通分量dfs,得到一棵外向树(不妨以1为根) 考虑一条边$(u,v,l)$,由于强连通,总存在一条从$v$到$ ...