💡 An editor is ready below the article—experiment freely!
Updated: 2026年5月31日
Flexbox Center
Original task (JA): 中央寄せ
📌
Conclusion
Flexbox Center — free browser-based HTML/CSS/JS practice
Why it matters in real projects
Flexboxのjustify-contentとalign-itemsで中央寄せできます。 Similar patterns appear daily in code review and production UI work.Step-by-step workflow
1. Read the guide and understand the goal of "Flexbox Center" 2. Review the HTML/CSS/JS editor pane and start from the starter code 3. Open hints if stuck; compare your diff with the sample solution 4. Click Run and inspect preview/console output 5. Auto-check looks for output containing: 中央. 6. After success, continue with adjacent exercises in the same categoryCore concept explained
Flexboxのjustify-contentとalign-itemsで中央寄せできます。Technical focus
Key HTML elements in this task: div, style.Hint before you peek at the solution
justify-content: center; align-items: center;Sample solution walkthrough
The solution uses HTML tags such as div, style. Check nesting and closing tags. CSS properties include min-height, display, justify-content, align-items, padding. Watch selector spelling and specificity. Explanation: Flexboxのjustify-contentとalign-itemsで中央寄せできます。 Hint recap: justify-content: center; align-items: center;Solution code
📝 Sample code
<div class="box">中央</div>
<style>body { min-height: 100vh; display: flex; justify-content: center; align-items: center; } .box { padding: 20px; }</style>Common mistakes for this exact task
・Skipping the hint: justify-content: center; align-items: center; ・Forgetting display:flex on the flex parent breaks alignmentTroubleshooting
Q: Preview does not change after Run A: Ensure you edited the HTML/CSS/JS pane and clicked Run. Q: Looks correct but check fails A: Auto-check looks for output containing: 中央. Look for typos, full-width spaces, or unclosed tags. Q: Console shows errors A: Open DevTools Console and fix bracket/quote mismatches at the reported line. Q: Hard to type on mobile A: Use landscape mode or continue on desktop—the same URL keeps progress in localStorage.Interview / portfolio tips
・Explain the techniques in "Flexbox Center" in your own words within 30 seconds ・Practice walking through each line of the sample solution on a whiteboard ・Be ready to discuss tags: div, style ・Discuss CSS properties: min-height, display, justify-content ・Prepare one alternative approach and why you chose this oneWhat to do after you pass
Move to the next exercise in the css-layout track, then continue the learning roadmap at /en/learning/layout/.Keywords
Free hands-on exercise covering 中央寄せ, css-layout, 初級, div, style, min-height, display, justify-content, align-items, padding—search-friendly guide for Flexbox Center.🧪 Try it here — safe to break things
Use the editor below to write code and preview instantly.
Jump to editor■ Exercise task
Flexboxでdivを画面中央（水平・垂直）に配置してください。
Hint if stuck
justify-content: center; align-items: center;