Question

我试图将蓝色框（c_container）置于页面中间，以使其始终保持在该位置（同时保持其水平长度），而与浏览器的伸展无关。不管我给它添加任何属性，它似乎默认为左侧。

c_container将用于显示内容，而标题将利用动态菜单在页面之间进行切换。最后的挑战是使盒子垂直和水平放置在中间。

HTML（剪辑）

<!DOCTYPE html>
<head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <link rel="stylesheet" type="text/css" href="css/style.css">
     <title>Page Title</title>
     <meta name="description" content="Write some words to describe your html page">
</head>
<body>

<div class="s_header">blah</div>
<div class="c_container">blah</div>
<div class="f_body">
    <div class="f_trim">blah</div>
</div>

</body>
</html>

CSS（剪辑）

p {
  align-content: center;
}

*{
  padding: 0;
  margin: 0;
  border: 0;
}

body{
  background-image: url('');
  background-repeat: repeat;
  background-color: #fff;
  height: 50px;
}

.blended_grid {
  display: block;
  width: 100%;
  overflow: auto;
  margin: 0px auto 0 auto;
}
.s_header{
  background-color : rgb(180, 71, 71);
  float: left;
  clear: none;
  height: 50px;
  width: 100%;

}

.c_container{
  position: absolute;
  /* box-align: center;  */
  background-color: rgb(99, 235, 240);
  margin: auto;
  width: 960px;
  top:20%; 
  bottom:20%;
  /* height: 1050px; */
}

.f_body {
  background-color: rgb(35, 41, 36);
  position: fixed;
  left: 0;
  bottom: 0;
  float: left;
  clear: none;
  height: 50px;
  width: 100%;
}

.f_trim {
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: rgb(39, 240, 73);
}

Answer 1

喜欢吗？使用left + translateX

基本居中

p {
  align-content: center;
}

*{
  padding: 0;
  margin: 0;
  border: 0;
}

body{
  background-image: url('');
  background-repeat: repeat;
  background-color: #fff;
  height: 50px;
}

.blended_grid {
  display: block;
  width: 100%;
  overflow: auto;
  margin: 0px auto 0 auto;
}
.s_header{
  background-color : rgb(180, 71, 71);
  float: left;
  clear: none;
  height: 50px;
  width: 100%;

}

.c_container{
  position: absolute;
  /* box-align: center;  */
  background-color: rgb(99, 235, 240);
  margin: auto;
  width: 960px;
  top:20%; 
  bottom:20%;
  /* height: 1050px; */
  left: 50%;
  transform: translateX(-50%);
}

.f_body {
  background-color: rgb(35, 41, 36);
  position: fixed;
  left: 0;
  bottom: 0;
  float: left;
  clear: none;
  height: 50px;
  width: 100%;
}

.f_trim {
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: rgb(39, 240, 73);
}

<div class="s_header">blah</div>
<div class="c_container">blah</div>
<div class="f_body">
    <div class="f_trim">blah</div>
</div>

Answer 2

喜欢吗？ CLAC计算左宽度

*{
  padding: 0;
  margin: 0;
  border: 0;
}

body{
  background-image: url('');
  background-repeat: repeat;
  background-color: #fff;
  height: 50px;
}

.blended_grid {
  display: block;
  width: 100%;
  overflow: auto;
  margin: 0px auto 0 auto;
}
.s_header{
  background-color : rgb(180, 71, 71);
  float: left;
  clear: none;
  height: 50px;
  width: 100%;

}

.c_container{
  position: absolute;
  /* box-align: center;  */
  background-color: rgb(99, 235, 240);
  margin:auto;
  width: 960px;
  top:20%; 
  bottom:20%;
  /* height: 1050px; */
    left:calc(50% - 480px); add this line
}

.f_body {
  background-color: rgb(35, 41, 36);
  position: fixed;
  left: 0;
  bottom: 0;
  float: left;
  clear: none;
  height: 50px;
  width: 100%;
}

.f_trim {
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: rgb(39, 240, 73);
}

<div class="s_header">blah</div>
<div class="c_container">blah</div>
<div class="f_body">
    <div class="f_trim">meathead</div>

Answer 3

CreateMatrix(a, b, c);

p {
  align-content: center;
}

*{
  padding: 0;
  margin: 0;
  border: 0;
}

body{
  background-image: url('');
  background-repeat: repeat;
  background-color: #fff;
  height: 50px;
}

.blended_grid {
  display: block;
  width: 100%;
  overflow: auto;
  margin: 0px auto 0 auto;
}
.s_header{
  background-color : rgb(180, 71, 71);
  float: left;
  clear: none;
  height: 50px;
  width: 100%;

}

.c_container{
  position: absolute;
  /* box-align: center;  */
  background-color: rgb(99, 235, 240);
  margin: auto;
  width: 960px;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  text-align: center;
  height: 50%;
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  /*   top:20%; 
  bottom:20%; */
/*   height: 1050px; */
}

.f_body {
  background-color: rgb(35, 41, 36);
  position: fixed;
  left: 0;
  bottom: 0;
  float: left;
  clear: none;
  height: 50px;
  width: 100%;
}

.f_trim {
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: rgb(39, 240, 73);
}

CSS中的居中块

3 个答案: