CSS绝对定位元素居中的几种方法

CSS居中绝对定位元素的方法,有很多种

div宽度未知1

在这里插入图片描述

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      没有宽度<br />
      照样居中,嘿嘿嘿
    div>
  div>
body>

div宽度未知2

CSS绝对定位元素居中的几种方法_第1张图片

ps:此方法适合ie8以上的浏览器

<div class="outer">
    <div class="inner">居中<br/>蓄力中div>
div>

<style>
	.outer {
	    position: relative; /* or absolute */
	    
	    /* unnecessary styling properties */
	    margin: 5%;
	    width: 80%;
	    height: 500px;
	    border: 1px solid red;
	}
	
	.inner {
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%);
	    
	    /* unnecessary styling properties */
	    max-width: 50%;
	    text-align: center;
	    border: 1px solid blue;
	}
style>

div宽度已知

在这里插入图片描述

<body>
  <div>
    <div id="content">
      居中蓄力中
    div>
  div>
body>
<style>
	#content {
	  position: absolute; 
	  left: 0; 
	  right: 0; 
	  margin-left: auto; 
	  margin-right: auto; 
	  width: 100px; /* 要设定宽度 */
	}
style>

案例

CSS绝对定位元素居中的几种方法_第2张图片

css

.container .news-box {
    width: 520px;
    height: 304px;
    background-color: #bfa;

    position: relative;
    margin: 2em auto;
    border: 1px solid black;
    overflow: hidden;
}

.news-box .img {
    width: 1560px;
    height: 304px;
}

.news-box .img img {
    width: 520px;
    height: 304px;
}

.news-box .img a {
    float: left;
}

.news-box .left,
.news-box .right {
	/* 开启绝对定位, top设置0,bottom设置0,margin设为auto,让它垂直居中 */
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: all 0.28s;
}
.news-box .left:hover,
.news-box .right:hover {
    background-color: #fff;
    color: red;
}

.news-box .left {
    left: 20px;
}

.news-box .right {
    right: 20px;
}

.news-box .title {
	/* 开启绝对定位, left设置0,right设置0,width设为auto,让宽度占满包含块 */
    position: absolute;
    height:40px;
    background-color: rgba(0,0,0,.28);
    color: #fff;
    letter-spacing: 2px;
    font-weight: bold;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 20px;
    line-height: 40px;
    width: auto;
    margin: auto;
}
.news-box .title h1 {
    float: left;
}

.news-box .title ul {
    /* 让ul开启绝对定位, 靠到右边去, 
       设置高度、top0、bottom0、marginauto
       先让ul垂直居中对齐 ,再让li再ul中浮动起来
    */
    position: absolute;
    right: 20px;
    height: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.news-box .title ul li {
    width: 8px;
    height: 8px;
    background-color: #fff;
    float: right;
    margin-right: 5px;
    border-radius: 50%;
    cursor: pointer;
}

.news-box .title ul li:hover {
    background-color: #e5e5e5;
}



html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/test15.css">
head>
<body>
    <div class="container">
        <div class="news-box">
            <div class="img">
                <a href="#"><img src="./img/1.jpg" alt="">a>
                <a href="#"><img src="./img/2.jpg" alt="">a>
                <a href="#"><img src="./img/3.jpg" alt="">a>
            div>
            <div class="left">
                <
            div>
            <div class="right">
                >
            div>
           <div class="title">
                <h1>黄河三峡美如画h1>
                <ul class="dot-list">
                    <li>li>
                    <li>li>
                    <li>li>
                    <li>li>
                ul>
            div> 
        div>
    div>
    
      
      
body>
html>

你可能感兴趣的:(前端学习,css,css3,html)