CSS:居中放置页面元素

旧城等待， 2022-06-14 04:19 226阅读 0赞

最近入了前端的坑，啊，改学前端了，长路漫漫.....

**块级元素文字居中放置：**

1.使用text-align性质可以居中显示块级元素中的文字

h1{
    			text-align: center;
    		}

2.设置包含文字容器的margin值：

把margin-left和margin-right设为auto时，该元素则会相对于父元素居中显示，注意，需设置元素h1的width属性，否则元素h1实际上占据了body元素的整个宽度，即使设置margin也并不会看到居中的效果

h1{
    			width: 400px;
    			margin:0 auto;
    			background:#666;
    			color: #fff;
    		}

**表格居中放置**

对表格使用text-align只能是使得表格单元格中的文本居中，并不能使整个表格位于页面居中位置

table{
    			width: 50%;
    			margin: 0 auto;
    			text-align: left;
    		}

**图片居中放置**

**水平**

1.在img元素外包装一个div标签，使其成为块级元素

CSS规则如下：

.flagicon{
    			text-align: center;
    		}

2.不包装div标签，把父元素body的padding-left属性值设置为50%，然后取需要居中元素的宽度值一半，将该值取负赋给margin-left属性

body{
    			padding-left: 50%;
    		}
    		img{
    			margin-left: -200px;
    		}

3.改变margin和display属性

.blocking{
    			display: block;
    			margin: 0 auto;
    		}

**垂直：**

1.使用position属性

img{
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			width: 600px;
    			height: 400px;
    			margin-left: -300px;
    			margin-top: -200px;
    		}

2.文字和图片（包括多张图片）都居中显示，就需要把所有内容放在一个div元素中

<div id="centerFrame">
    <p>Lorem ipsum dolor sit amet,consectetuer adipising elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam.Lorem ipsum dolor sit amet,consectetuer adipising elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam.</p>
    <img src="../img/7.jpg" alt="The Summer" width="450px" height="400px" />
    </div>

#centerFrame{
    			width: 450px;
    			position: absolute;
    			top:50%;
    			left: 50%;
    			margin-top: -200px;
    			margin-left: -225px;
    		}