レスポンシブサイトで文字を縦横中央にしたい。

レスポンシブサイトを作っています。（北朝鮮っぽいのはネタで作っているだけです）

下記の黄色の文字の部分を北朝鮮の国旗の縦の中央寄せにしたいのですが、うまくいきません。

よい方法はありますでしょうか？

<html> ```ここに言語を入力 <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="css/main_style.css"> <link rel="stylesheet" type="text/css" href="css/index_style.css"> <meta charset="UTF-8"> <title>無題ドキュメント</title> </head> <body> <header> <nav class="clearfix">

<!-- logo -->
<div class="logo">
  <h1><a href="index.html"><span>株式会社DPRK</span></a></h1>
</div>
<!-- logo -->

<ul>
  <li class="menu01"><a href="#">ホーム<br>
    <span>HOME</span></a></li>
  <li class="menu02"><a href="#">会社概要<br>
    <span>COMOPANY</span></a></li>
  <li class="menu03"><a href="#">事業内容<br>
    <span>WORKS</span></a></li>
  <li class="menu04"><a href="#">ニュース<br>
    <span>NEWS</span></a></li>
  <li class="menu05"><a href="#">採用情報<br>
    <span>RECRUIT</span></a></li>
  <li class="menu06"><a href="#">お問い合わせ<br>
    <span>CONTACT</span></a></li>
</ul>

</nav> </header> <section>  <div class="slide"> <img src="img/slideshow/slide1_nkflag.jpg" width="1280" height="600" alt="北朝鮮国旗"> <img src="img/slideshow/slide2_3kim.jpg" width="1280" height="600" alt="金日成・金正日・金正恩"> <img src="img/slideshow/slide3_juche.jpg" width="1280" height="600" alt="チュチェ思想塔"> <img src="img/slideshow/silde4_pyongyang.jpg" width="1280" height="600" alt="平壌"> <img src="img/slideshow/silde5_parade.jpg" width="1280" height="600" alt="軍事パレード"> </div>  </section> <section>

<!-- company_dscription -->
<div id="company_discription">
	<p>”人間が全ての事の主人であり、全てを決める”</p>
</div>
<!-- company_dscription -->

</section> </body> </html>


<CSS>
```ここに言語を入力
@charset "UTF-8";
/* CSS Document */

/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */

/* -------------------------------------------- */
/* ▼PC用デザインとして付け足すデザイン */
/* -------------------------------------------- */
@media all and (min-width: 608px) {
	
* {
	margin:0;
	padding:0;
}

body {
	color:#333;
}
a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

h1 {
  	width:250px;
  	height:60px;
  	background-image:url("../img/logo.png");
  	background-repeat:no-repeat;
	
}

h1 span {
	display:none;
}

h1 a {
	display:block;
  	width:210px;
  	height:60x;
}

.logo {
	float:left;
	width:250px;
	padding-right:20px;
}

nav {
	background-color:#fff;
	padding-top:10px;
	display: flex;
	justify-content: center;
	height: 82px; /* 高さ */
  	width: 100%; /* 長さ */
  	position: fixed; /* ヘッダーを固定(これが重要) */
  	top: 0; /* 固定する位置 */
	left: 0; /* 固定する位置 */
  	right: 0;  /* 固定する位置 */
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
}

nav li {
	list-style:none;
	float:left;
	text-align:center;
	overflow: hidden;
	
}

nav .menu01, .menu02, .menu03, .menu04, .menu05, .menu06 {
	width:125px;
	background-color:#FFF;
	font-weight:bold;
}

nav .menu02, .menu03, .menu04, .menu05, .menu06 {
	border-left: solid 1px #CCC;
	-moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   
}

nav a {
	width:100%;
	display:block;
}

nav span {
	
	color:#CCC;
	font-weight:100;
	line-height:3em;
}

nav a:link { color: #333; }
nav a:visited { color: #333; }
nav a:hover { color: #333; }
nav a:active { color: #333; }

a {
	text-decoration:none;
}

.clearfix {
 *zoom: 1;
}
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}

}

.slide {
	position : relative;
	overflow : hidden;
	top:93px;
	/* 画像のサイズに合わせて変更ください */
  	width : 1280px;
	height : 600px;
	margin : auto;      /* サンプルは中央寄せの背景：白 */
}
/*=== 画像の設定 ======================================= */
.slide img {
	display : block;
	position : absolute;
	/* 画像のサイズを表示エリアに合せる */
  	width : inherit;
	height : inherit;
	left : 100%;
	animation : slideAnime 15s ease infinite;
	z-index: -1;
}
/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) {
	animation-delay: 0s
}
.slide img:nth-of-type(2) {
	animation-delay: 3s
}
.slide img:nth-of-type(3) {
	animation-delay: 6s
}
.slide img:nth-of-type(4) {
	animation-delay: 9s
}
.slide img:nth-of-type(5) {
	animation-delay: 12s
}

 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime {
 0% {
left: 100%
}
 1% {
left: 0
}
 19% {
left: 0
}
 20% {
left: -100%
}
 100% {
left: -100%
}
}

#company_discription {
	width:100%;
	margin-top:93px;
	background-image:url(../img/sc2_nk_flag_bg.jpg),url(../img/sc2_nk_flag_bg_1px.jpg);
	background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
	repeat; /* 再背面の背景レイヤーに対応 */
	height:150px;
}

#company_discription p {
	width:100%;
	word-break: keep-all;
	color:#faee00;
	text-align:center;
	vertical-align:middle;
	font-size:36px;
	font-weight:bold;
}

「現状」

「画面を小さくしてみる」
![]

「試したこと」


#company_discription {
	width:100%;
	margin-top:93px;
	background-image:url(../img/sc2_nk_flag_bg.jpg),url(../img/sc2_nk_flag_bg_1px.jpg);
	background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
	repeat; /* 再背面の背景レイヤーに対応 */
	height:150px;
}

「height:150px;」を「line-height:150px;」に変更した。
すると通常画面では縦横中央に文字が表示されるが画面を小さくすると以下のようになってしまう。

行動規範の内容に同意します

回答2件

ベストアンサー

#company_discription {
    width:100%;
    margin-top:93px;
    background-image:url(../img/sc2_nk_flag_bg.jpg),url(../img/sc2_nk_flag_bg_1px.jpg);
    background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
    repeat; /* 再背面の背景レイヤーに対応 */
    height:150px;
}

こちらのほうに以下の3つを追加したら縦の中央になってくれました。

display: flex;
justify-content: center; /*左右中央揃え*/
align-items: center;     /*上下中央揃え*/

pタグのほうではなく#company_discriptionの要素に追加するのが正解のようでした。

投稿2018/03/09 06:18

退会済みユーザー

総合スコア0

手っ取り早く画面中央に配置するには色々な方法がありますが、
私がよく使うのは下記のように、
縦位置をwindow半分縦幅、横位置をwindow半分横幅に配置し、
transformで自身の上左を半分幅ずらすというやり方です。

css
1section {
2  position: relative;
3}
4#company_discription {
5　display: block;
6  position: absolute;
7  top: 50vh;
8  left: 50vw;
9  transform: translate(-50%, -50%);
10  width: 480px;
11  height: 150px;
12}

投稿2018/03/06 08:04

編集2018/03/06 08:05

pokkur

総合スコア76

退会済みユーザー

2018/03/06 12:11

ありがとうございます。記載頂いたものでwidthを100%にしてtop:50vhを0にしたら背景画像は綺麗に端まで表示されますし、画面を小さくしても背景画像も綺麗に表示されますが、文字だけはどうしても縦の真ん中になってくれません。 width:480pxになっていますが背景画像は両端まで表示されるようにしたいです。

行動規範の内容に同意します

あなたの回答