CSS居中对齐、定位的总结

1.css水平，垂直居中的写法

(1)水平居中

行内元素

text-align:center

块级元素

margin:auto

(2)垂直居中

当height和line-height:height两个属性设置相同高度时，该元素内部文字会居中。

line-height:height;

padding：将顶部和底部设置同样的高度，也会居中

padding-top:20px;
padding-bottom:20px;

margin：让div居中对齐

margin-left: auto;
margin-right: auto;

除了使用line-height和padding、margin外，我们还可以使用 transform 属性来设置垂直居中

transform: translate(-50%, -50%);

2.position定位

position 属性指定了元素的定位类型。
共有以下五种，常用的是(1),(2),(3)

(1)relative定位，相对定位元素的定位是相对其正常位置。

position:relative;

(2)absolute定位，绝对定位的元素的位置相对于最近的已定位父元素

position:absolute;

(3)fixed 定位，元素的位置相对于浏览器窗口是固定位置。

position:fixed;

(4)sticky 定位，可以把它称之为粘性定位

position: sticky;

(5)static定位，静态定位的元素不会受到 top, bottom, left, right影响

position: static;

CSS居中对齐、定位的总结相关推荐

css居中对齐的几种情况(待补充
1.一般情况可以采用转换为块级元素来 (并且此时盒子已经给了宽高) display: block; /*注意只有块级元素可用行内块行内元素都不行*/margin: 100px auto; ...
css居中最佳方案,CSS 水平、垂直居中的5种最佳方案
CSS 居中对齐代码中均省略了浏览器前缀以下例子以我的个人的标准排序当然也有更多的居中处理方法但我觉得只有这5种方法是最完善的解决方案 flex 居中优点:可对未知高度进行居中处理 .wra ...
两端文字对齐css,css两端对齐怎么设置，css中文本的对齐有哪些
css两端对齐怎么设置,css中文本的对齐有哪些内容导读:除了css两端对齐,本文还介绍了主要的css中文本的对齐有哪些.可以看到,常见的文本对齐方式是靠左.居中以及靠右,相对来说css两端对齐用得 ...
代码居中对齐_一篇文章带你了解CSS对齐方式
一.居中 1. 居中对齐元素将块元素水平居中对齐(像 ) , 使用 margin: auto; 设置元素的宽度将阻止它伸展到容器的边缘. 然后元素将占用指定的宽度,剩下的空间将平分在两个边距之间: ...
自动居中对齐 html,css如何居中对齐？
在我们开发前端页面的时候,为了让页面效果美观,会出现需要居中效果的地方.下面本篇文章就来给大家介绍一下使用CSS设置居中对齐的方法,希望对大家有所帮助. 1.text-align:center -- ...
文本居中对齐(CSS、HTML)
文本居中对齐(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta charset ...
html div布局位置横,div位置布局 CSS实现DIV居中对齐 div居右对齐 div居左对齐
使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右居中靠左对齐介绍篇) 实现DIV对齐用到关键属性有两个,一个为float一个为margin. ...
css 伪元素居中对齐
css 伪元素居中对齐 .demo {display: flex;padding: 40px;}.demo::after {content: '';display: inline-block;back ...
css 实现居中对齐的几种方式
如何居中 div? 1. 水平居中:给 div 设置一个宽度,然后添加 margin:0auto 属性 div {width: 200px; margin: 0auto; } 2. 水平居中,利用 t ...
利用CSS实现居中对齐
1. 文本居中首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: <div class="parentDiv">这里随意 ...