正文

居中与垂直居中(代码片段)

daheiylx  daheiylx  2022-12-17  488

关键词：

　　每次面试都是知识收获的过程！

1、文本水平居中

 1 <style type="text/css">
 2     p 
 3         width: 200px;
 4         height: 200px;
 5         border: 2px solid black;
 6         text-align: center;
 7     
 8 </style>
 9 
10 <p>水平居中</p>

效果：

技术分享图片

2、文本垂直居中

 1  <style type="text/css">
 2      p 
 3          width: 200px;
 4          height: 200px;
 5          border: 2px solid black;
 6          text-align: center;
 7             line-height: 200px;
 8      
 9  </style>
10  
11 <p>水平居中</p>

效果：

技术分享图片

3、块元素水平

 1 <style type="text/css">
 2     p 
 3         width: 200px;
 4         height: 200px;
 5         border: 2px solid black;
 6         text-align: center;
 7         line-height: 200px;
 8         margin: 0 auto;
 9     
10 </style>

效果：

技术分享图片

4、块元素垂直居中

 1 //第1种方法
 2 p 
 3     position: absolute;
 4     left: 50%;
 5     top: 50%;
 6     width: 200px;
 7     height: 200px;
 8     border: 2px solid black;
 9     text-align: center;
10     line-height: 200px;
11     margin: -100px 0 0 -100px;
12 
13 
14 //第2种方法
15 p 
16     position: absolute;
17     left: 50%;
18     top: 50%;
19     width: 200px;
20     height: 200px;
21     border: 2px solid black;
22     text-align: center;
23     line-height: 200px;
24     transform: translate(-50%,-50%);
25 
26 
27 //第3种方法
28 p 
29     position: absolute;
30     width: 200px;
31     height: 200px;
32     border: 2px solid black;
33     text-align: center;
34     line-height: 200px;
35     margin: auto;
36     left: 0;
37     top: 0;
38     right: 0;
39     bottom: 0;
40 
41 
42 //第4种方法
43 p 
44         width: 200px;
45         height: 200px;
46         border: 1px solid black;
47         text-align: center;
48         line-height: 200px;
49 
50 #div2 
51     display: flex;
52     justify-content: center;
53     align-items: center;
54 
55 
56 <div id="div2">
57     <p>垂直居中</p>
58 </div>

效果：

技术分享图片

css灵活的高度垂直居中与css，超越ie7(代码片段)

查看详情

-水平居中垂直居中水平垂直居中(代码片段)

1、水平居中水平居中可分为行内元素水平居中和块级元素水平居中1.1行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。.centertext-align:center;<divclass="center">水平居... 查看详情

css水平居中+垂直居中+水平/垂直居中的方法总结(代码片段)

目录水平居中　　行内元素　　块级元素　　　　方案一：(分宽度定不定两种情况)　　　　方案二：使用定位属性　　　　方案三：使用flexbox布局实现（宽度定不定都可以）垂直居中　　单行的行内元素　　多行的行... 查看详情

垂直居中(代码片段)

CSS实现垂直居中的5种方法01March2009 on css, 垂直, 居中利用CSS来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用CSS... 查看详情

垂直居中备忘(代码片段)

对需要水平垂直居中的元素写css:.midposition:absolute;top:50%;left:50%;transform:translate(-50%,-50%);flex：对父级元素写css:单行居中：1.mid2display:flex;3justify-content:center;4align-items:center;5 多行垂直居中：.middisplay 查看详情

css垂直居中详解(代码片段)

一般情况下有的需要问水平居中和垂直居中.常见的水平居中和垂直居中有：水平居中：行内元素：text-align:center;块级元素：margin:0auto;absolute+transform;flex+justify-content:center;垂直居中：line-height:height;absolu 查看详情

水平居中+垂直居中(代码片段)

页面结构都是:<divclass="parent"style="background-color:red;width:400px;height:400px;"><divclass="child"style="background-color:blue;width:200px;height:200px;"></div></div>一、水平居中1.设置父查看详情