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) 理念 利用表格 ...
随机推荐
- Machine learning （6-Logistic Regression）
1.Classification However, 2.Hypothesis Representation Python code: import numpy as np def sigmoid(z) ...
- 计算机网络传输层之TCP协议（tcp协议特点、tcp报文段首部格式、tcp连接建立---三次握手、tcp连接释放---四次握手）
文章转自:https://blog.csdn.net/weixin_43914604/article/details/105516090 学习课程:<2019王道考研计算机网络> 学习目的 ...
- CPU使用率和平均负载
转载: https://mp.weixin.qq.com/s?__biz=MzU4NzU0MDIzOQ==&mid=2247487782&idx=3&sn=3f04bb053d ...
- candy leetcode C++
There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...
- hdu 5094 Maze (BFS+状压)
题意: n*m的迷宫.多多要从(1,1)到达(n,m).每移动一步消耗1秒.有P种钥匙. 有K个门或墙.给出K个信息:x1,y1,x2,y2,gi 含义是(x1,y1)与(x2,y2)之间有gi ...
- 在线编辑Word——插入图表
在Word中可插入图表,配合使用表格能够更加全方位的展示数据的可信度并增加数据的可读性.本文将通过使用在线编辑器 Spire.Cloud Word 演示如何来插入图表,并设置相关格式化操作.具体步骤如 ...
- Java测试开发--MySql之C3P0连接池（八）
连接池C3P0! 连接池技术的目的:解决建立数据库连接耗费资源和时间很多的问题,提高性能 ! 下面以案例演示下C3P0的操作流程. 1.测试准备: ①MySql数据库一枚②database名为myte ...
- Java测试开发--Spring Tools Suite (STS) 简介（一）
sts是一个定制版的Eclipse,专为Spring开发定制的,方便创建调试运行维护Spring应用. 官网下载之后,可以看到一个sts-bundle,里面有三个文件夹,一个法律信息,一个tc Ser ...
- Windows下git多用户配置
refer from :https://blog.csdn.net/qq_39892503/article/details/109374201 windows git多用户配置 在安装git结束,我们 ...
- NOIP模拟92&93(多校26&27)
前言 由于太菜了,多校26 只改出来了 T1 ,于是直接并在一起写啦~~~. T0 NOIP 2018 解题思路 第一次考场上面写三分,然而我并不知道三分无法处理不是严格单峰的情况,但凡有一个平台都不 ...